/* ==========================================================================
   GP Garden Planner — styles
   Design language: clean modern plant-app aesthetic — pale mint surfaces,
   white rounded cards, deep forest-green accents, bright leaf-green for
   active/icon states. Custom properties live on :root (namespaced --gpgpl-)
   per the plant library's existing lesson: scoping vars on a wrapper
   element caused them to fail to resolve in sibling components.
   ========================================================================== */

:root {
	/* Grow Paradise "Potting shed" identity (2.0.0): kraft, paper, ink,
	   moss for the one main action, and one colour per kind of job. */
	--gpgpl-ink:        #33291F;
	--gpgpl-ink-soft:    #5F5040;
	--gpgpl-paper:       #EFE7D8;
	--gpgpl-paper-panel: #FAF6EE;
	--gpgpl-grid-line:   #E4DACA;
	--gpgpl-leaf:        #4A6A34;
	--gpgpl-leaf-dark:   #38522A;
	--gpgpl-clay:        #A44E2E;
	--gpgpl-clay-dark:   #8A3F24;
	--gpgpl-gold:        #E0B04A;
	--gpgpl-border:      #E2D6C2;
	--gpgpl-radius-s:    12px;
	--gpgpl-radius-m:    18px;
	--gpgpl-shadow:      0 4px 14px rgba(80, 60, 40, 0.10);
	--gpgpl-font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
	--gpgpl-font-ui:      'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--gp-kraft: #EFE7D8; --gp-paper: #FAF6EE; --gp-paper2: #F2EADC; --gp-line: #E2D6C2;
	--gp-ink: #33291F; --gp-ink2: #5F5040; --gp-ink3: #7A6A58;
	--gp-wood: #D8B98D; --gp-wood-d: #B8956A; --gp-twine: #C4A272;
	--gp-moss: #4A6A34; --gp-moss-d: #38522A; --gp-moss-l: #E2E8D3;
	--gp-straw: #E0B04A; --gp-straw-d: #7E5C0E; --gp-straw-l: #F5E7C0;
	--gp-clay: #A44E2E; --gp-clay-l: #F2DED3;
	--gp-rain: #3B6A82; --gp-rain-l: #DCE7EC;
	--gp-soil: #74502F; --gp-soil-l: #EBDFCF;
	--gp-slate: #4B5B6C; --gp-slate-l: #E1E5E9;
	--gp-plum: #6A5690; --gp-plum-l: #E7E1EE;
}

.gpgpl-app {
	--gpgpl-px-per-ft: 60; /* recalculated by JS to fit the container */
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	background: var(--gpgpl-paper);
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-m);
	max-width: 980px;
	margin: 2rem auto;
	box-shadow: var(--gpgpl-shadow);
}

.gpgpl-app *,
.gpgpl-app *::before,
.gpgpl-app *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */

.gpgpl-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-header-title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.gpgpl-header-icon {
	display: inline-flex;
	color: #9CAF7B;
}

.gpgpl-header h2 {
	font-family: var(--gpgpl-font-display);
	font-weight: 600;
	font-size: 1.35rem;
	margin: 0;
	letter-spacing: 0.01em;
}

.gpgpl-header-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.gpgpl-btn {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 0.85rem;
	border-radius: var(--gpgpl-radius-s);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.08s ease, background 0.15s ease;
	white-space: nowrap;
}

.gpgpl-btn:active {
	transform: translateY(1px);
}

.gpgpl-btn-ghost {
	background: transparent;
	border-color: var(--gpgpl-border);
	color: var(--gpgpl-ink-soft);
}

.gpgpl-btn-ghost:hover {
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
}

.gpgpl-header .gpgpl-btn-ghost {
	background: rgba(245, 241, 228, 0.1);
	border-color: rgba(245, 241, 228, 0.4);
	color: #FCF9F3;
}

.gpgpl-header .gpgpl-btn-ghost:hover {
	background: rgba(245, 241, 228, 0.2);
	color: #FCF9F3;
}

.gpgpl-btn-primary {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-btn-primary:hover {
	background: var(--gpgpl-leaf-dark);
}

.gpgpl-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.gpgpl-undo-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.gpgpl-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: var(--gpgpl-radius-s);
	border: 1px solid var(--gpgpl-border);
	background: #FCF9F3;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-icon-btn:hover {
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
}

.gpgpl-unit-toggle {
	display: inline-flex;
	border: 1px solid rgba(245, 241, 228, 0.4);
	border-radius: var(--gpgpl-radius-s);
	overflow: hidden;
}

.gpgpl-unit-btn {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.4rem 0.6rem;
	border: none;
	background: transparent;
	color: rgba(245, 241, 228, 0.75);
	cursor: pointer;
}

.gpgpl-unit-btn.is-active {
	background: rgba(245, 241, 228, 0.18);
	color: #FCF9F3;
}

.gpgpl-unit-btn:hover {
	color: #FCF9F3;
}

/* ---------- Bed configuration bar ---------- */

.gpgpl-bed-config {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0.65rem 1.25rem;
	background: var(--gpgpl-paper-panel);
	border-bottom: 1px solid var(--gpgpl-border);
}

.gpgpl-bed-size {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--gpgpl-ink-soft);
	flex: 0 1 auto;
	min-width: 0;
}

.gpgpl-bed-size-label {
	white-space: nowrap;
}

.gpgpl-bed-size-select {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	padding: 0.35rem 0.55rem;
	border-radius: var(--gpgpl-radius-s);
	border: 1px solid var(--gpgpl-border);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	min-width: 0;
	max-width: 100%;
}

.gpgpl-custom-size[hidden] {
	display: none;
}

.gpgpl-custom-size {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-basis: 100%;
}

.gpgpl-custom-size input[type="number"] {
	width: 72px;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

.gpgpl-custom-x {
	color: var(--gpgpl-ink-soft);
	font-size: 0.85rem;
}

.gpgpl-custom-unit-label {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	font-weight: 600;
}

.gpgpl-shape-edit-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	flex: none;
}

.gpgpl-shape-edit-toggle.is-active {
	background: var(--gpgpl-leaf);
	border-color: var(--gpgpl-leaf);
	color: #FCF9F3;
}

/* ---------- Layout: design area + controls, all in normal page flow ---------- */

.gpgpl-design-area {
	background: var(--gpgpl-paper);
	padding: 0.85rem 1rem 0.6rem;
	border-top-left-radius: var(--gpgpl-radius-m);
	border-top-right-radius: var(--gpgpl-radius-m);
	border-bottom: 1px solid var(--gpgpl-border);
}

.gpgpl-scroll-zone {
	display: flex;
	flex-direction: column;
}

.gpgpl-palette {
	background: var(--gpgpl-paper-panel);
	padding: 0.85rem 1.25rem;
}

.gpgpl-palette-search {
	position: relative;
	margin-bottom: 0.75rem;
}

.gpgpl-search-input {
	width: 100%;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.88rem;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

.gpgpl-search-input:focus-visible,
.gpgpl-btn:focus-visible,
.gpgpl-bed-size-select:focus-visible,
.gpgpl-plant-chip:focus-visible,
.gpgpl-plant-token:focus-visible,
.gpgpl-search-result:focus-visible,
.gpgpl-added-toggle:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-search-results[hidden] {
	display: none;
}

.gpgpl-search-results {
	margin-top: 0.4rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	max-height: 45vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

.gpgpl-search-result {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.45rem 0.55rem;
	background: #FCF9F3;
	border: none;
	border-bottom: 1px solid var(--gpgpl-border);
	text-align: left;
	cursor: pointer;
	font-family: var(--gpgpl-font-ui);
}

.gpgpl-search-result:last-child {
	border-bottom: none;
}

.gpgpl-search-result:hover,
.gpgpl-search-result:focus-visible {
	background: #EAE9D8;
}

.gpgpl-search-empty {
	padding: 0.6rem 0.65rem;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

/* ---------- Added plants (collapsible, horizontal) ---------- */

.gpgpl-added-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.2rem 0.1rem 0.5rem;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--gpgpl-border);
	cursor: pointer;
	font-family: var(--gpgpl-font-ui);
}

.gpgpl-added-toggle-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-added-count {
	font-weight: 400;
	opacity: 0.7;
}

.gpgpl-added-chevron {
	color: var(--gpgpl-leaf);
	transition: transform 0.15s ease;
}

.gpgpl-added-wrap.is-collapsed .gpgpl-added-chevron {
	transform: rotate(-90deg);
}

.gpgpl-added-wrap.is-collapsed .gpgpl-added-chip-list,
.gpgpl-added-wrap.is-collapsed .gpgpl-empty-note {
	display: none;
}

.gpgpl-empty-note {
	margin: 0.6rem 0 0;
	font-size: 0.78rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-empty-note[hidden] {
	display: none;
}

.gpgpl-chip-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding-bottom: 0.35rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.gpgpl-plant-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: none;
	width: 152px;
	padding: 0.4rem 0.5rem;
	background: #FCF9F3;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	cursor: pointer;
	position: relative;
}

.gpgpl-plant-chip:hover {
	border-color: var(--gpgpl-leaf);
}

.gpgpl-chip-remove {
	margin-left: auto;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	font-size: 0.9rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.gpgpl-chip-remove:hover {
	background: rgba(162, 75, 46, 0.12);
	color: var(--gpgpl-clay);
}

.gpgpl-chip-swatch {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	flex: none;
	border: 2px solid rgba(51, 41, 31, 0.15);
}

.gpgpl-chip-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	min-width: 0;
}

.gpgpl-chip-name {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-chip-meta {
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
}

/* ---------- Add-your-own-plant form ---------- */

.gpgpl-add-plant-toggle[hidden] {
	display: none;
}

.gpgpl-add-plant-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	margin-top: 0.75rem;
	padding: 0.5rem;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gpgpl-leaf-dark);
	background: transparent;
	border: 1px dashed var(--gpgpl-leaf);
	border-radius: var(--gpgpl-radius-s);
	cursor: pointer;
}

.gpgpl-add-plant-toggle:hover {
	background: #EAE9D8;
}

.gpgpl-add-plant-form[hidden] {
	display: none;
}

.gpgpl-add-plant-form {
	margin-top: 0.65rem;
	padding: 0.75rem;
	background: #FCF9F3;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.gpgpl-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.gpgpl-form-row-split {
	flex-direction: column;
	gap: 0.55rem;
}

.gpgpl-form-row-split > div {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

@media (min-width: 900px) {
	.gpgpl-form-row-split {
		flex-direction: row;
		gap: 0.6rem;
	}

	.gpgpl-form-row-split > div {
		flex: 1;
	}
}

.gpgpl-add-plant-form label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-add-plant-form input[type="text"],
.gpgpl-add-plant-form input[type="number"],
.gpgpl-add-plant-form select {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	padding: 0.4rem 0.5rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	width: 100%;
}

.gpgpl-add-plant-form input[type="color"] {
	width: 100%;
	height: 34px;
	padding: 2px;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
}

.gpgpl-form-error {
	margin: 0;
	font-size: 0.78rem;
	color: var(--gpgpl-clay);
}

.gpgpl-form-error[hidden] {
	display: none;
}

.gpgpl-form-actions {
	display: flex;
	gap: 0.5rem;
}

.gpgpl-form-actions .gpgpl-btn {
	flex: 1;
}

/* ---------- Canvas ---------- */

.gpgpl-hint {
	display: block;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	margin: 0 0 0.85rem;
	padding: 0 1.25rem;
}

.gpgpl-hint[hidden] {
	display: none;
}

.gpgpl-shape-toolbar[hidden] {
	display: none;
}

.gpgpl-shape-toolbar {
	margin: 0 1.25rem 0.85rem;
	padding: 0.6rem 0.7rem;
	background: var(--gpgpl-paper-panel);
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
}

.gpgpl-shape-hint {
	display: block;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	margin-bottom: 0.55rem;
}

.gpgpl-shape-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gpgpl-shape-smooth {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.82rem;
	color: var(--gpgpl-ink-soft);
	font-weight: 600;
	cursor: pointer;
}

.gpgpl-shape-smooth input {
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-selected-panel[hidden] {
	display: none;
}

.gpgpl-selected-panel {
	margin-top: 0.7rem;
	padding: 0.7rem 0.8rem;
	background: var(--gpgpl-paper-panel);
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-m);
}

.gpgpl-selected-panel-header {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.gpgpl-selected-panel-title {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	flex: 1;
	min-width: 0;
}

.gpgpl-selected-name {
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-selected-spread {
	font-size: 0.82rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-info-thumb[hidden] {
	display: none;
}

.gpgpl-info-thumb {
	width: 40px;
	height: 40px;
	border-radius: var(--gpgpl-radius-s);
	object-fit: cover;
	flex: none;
	border: 1px solid var(--gpgpl-border);
}

.gpgpl-info-close {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
}

.gpgpl-info-close:hover {
	background: rgba(51, 41, 31, 0.08);
	color: var(--gpgpl-ink);
}

.gpgpl-selected-actions {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin-top: 0.6rem;
	overflow-x: auto;
}

.gpgpl-icon-btn-danger {
	color: var(--gpgpl-clay);
	border-color: rgba(162, 75, 46, 0.35);
}

.gpgpl-icon-btn-danger:hover {
	background: var(--gpgpl-clay);
	color: #FCF9F3;
	border-color: var(--gpgpl-clay);
}

.gpgpl-icon-btn[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
	background: #FCF9F3;
	color: var(--gpgpl-ink-soft);
}

/* iOS Safari refuses to visually shrink <input type=color> no matter what
   CSS is applied to it directly — appearance:none has no effect on this
   specific input type there. The reliable cross-browser fix is to stop
   trying to style the native control at all: it sits here fully invisible
   but still fills the box (so tapping anywhere on the square opens the
   native colour picker), while a plain sibling span shows the actual small
   square and is kept in sync with the input's value from JS. */
.gpgpl-color-swatch-wrap {
	position: relative;
	width: 28px;
	height: 28px;
	flex: none;
	border-radius: var(--gpgpl-radius-s);
	border: 1px solid var(--gpgpl-border);
	overflow: hidden;
	cursor: pointer;
}

.gpgpl-color-swatch-visual {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.gpgpl-selected-color {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	opacity: 0;
	cursor: pointer;
}

.gpgpl-info-details {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 0.75rem 0 0;
}

.gpgpl-info-details > div {
	display: flex;
	flex-direction: column-reverse;
}

.gpgpl-info-details dt {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-info-details dd {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-info-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gpgpl-leaf-dark);
	text-decoration: none;
}

.gpgpl-info-link:hover {
	text-decoration: underline;
}

.gpgpl-info-link[hidden] {
	display: none;
}

.gpgpl-info-none {
	margin: 0.6rem 0 0;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-info-none[hidden] {
	display: none;
}

.gpgpl-canvas-scale-wrap {
	position: relative;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-m);
	/* Not clipped: corner handles on the garden's edge must be whole to
	   grab. The plan itself (.gpgpl-canvas) clips its plants. */
	overflow: visible;
	background: var(--gpgpl-paper-panel);
}

.gpgpl-shape-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.gpgpl-shape-overlay.is-editing {
	pointer-events: none; /* the svg itself stays click-through; handles opt back in */
}

.gpgpl-shape-mask-path {
	/* Outside the bed reads as lawn, as it does in 3D */
	fill: rgba(74, 106, 52, 0.34);
	pointer-events: none;
}

.gpgpl-shape-outline {
	fill: none;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2;
	stroke-dasharray: 6 4;
	pointer-events: none;
}

.gpgpl-shape-outline.is-committed {
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2.5;
	stroke-dasharray: none;
}

.gpgpl-shape-handle {
	fill: #FCF9F3;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 3;
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
	filter: drop-shadow(0 1px 3px rgba(51, 41, 31, 0.4));
}

.gpgpl-shape-handle:active {
	cursor: grabbing;
}

.gpgpl-shape-handle.is-selected {
	fill: var(--gpgpl-gold);
	stroke: var(--gpgpl-ink);
}

.gpgpl-shape-edge-hit {
	stroke: transparent;
	stroke-width: 16;
	fill: none;
	pointer-events: auto;
	cursor: copy;
}

.gpgpl-canvas {
	position: relative;
	width: 100%;
	background-color: #FAF6EE;
	background-image:
		linear-gradient(var(--gpgpl-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--gpgpl-grid-line) 1px, transparent 1px);
	background-size: var(--gpgpl-px-per-ft-px, 60px) var(--gpgpl-px-per-ft-px, 60px);
	touch-action: none;
	overflow: hidden;
	border-radius: inherit; /* the frame's rounded corners, now it doesn't clip */
}

.gpgpl-plant-token {
	position: absolute;
	border-radius: 50%;
	border: 2px solid rgba(51, 41, 31, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: grab;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	box-shadow: 0 1px 4px rgba(51, 41, 31, 0.2);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.gpgpl-plant-token:active {
	cursor: grabbing;
}

.gpgpl-plant-token.is-selected {
	border-color: var(--gpgpl-ink);
	box-shadow: 0 0 0 3px rgba(51, 41, 31, 0.18);
}

.gpgpl-plant-token.is-crowded {
	border-color: var(--gpgpl-gold);
	box-shadow: 0 0 0 3px rgba(198, 154, 59, 0.35);
}

.gpgpl-token-label {
	font-size: 0.68rem;
	font-weight: 600;
	color: rgba(51, 41, 31, 0.85);
	padding: 0 4px;
	line-height: 1.1;
	pointer-events: none;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.gpgpl-scale-note {
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
	margin: 0.75rem 0 0;
	padding: 0 1.25rem 1rem;
}

/* ---------- Plants in My Design (full card list at the foot of the page) ---------- */

.gpgpl-design-list {
	padding: 1rem 1.25rem 1.5rem;
	border-top: 1px solid var(--gpgpl-border);
	background: var(--gpgpl-paper-panel);
}

.gpgpl-design-list-title {
	font-family: var(--gpgpl-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	margin: 0 0 0.75rem;
}

.gpgpl-design-list-empty[hidden] {
	display: none;
}

.gpgpl-design-list-empty {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
	margin: 0;
}

.gpgpl-design-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 0.85rem;
}

.gpgpl-design-card {
	display: flex;
	gap: 0.7rem;
	padding: 0.75rem;
	background: #FCF9F3;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-m);
}

.gpgpl-design-card-thumb {
	width: 56px;
	height: 56px;
	border-radius: var(--gpgpl-radius-s);
	object-fit: cover;
	flex: none;
	border: 1px solid var(--gpgpl-border);
}

.gpgpl-design-card-swatch {
	width: 56px;
	height: 56px;
	border-radius: var(--gpgpl-radius-s);
	flex: none;
	border: 1px solid rgba(51, 41, 31, 0.15);
}

.gpgpl-design-card-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.gpgpl-design-card-name {
	font-family: var(--gpgpl-font-display);
	font-size: 0.95rem;
	color: var(--gpgpl-ink);
	line-height: 1.25;
}

.gpgpl-design-card-meta {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
	line-height: 1.35;
}

.gpgpl-design-card-link {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--gpgpl-leaf-dark);
	text-decoration: none;
	margin-top: 0.15rem;
}

.gpgpl-design-card-link:hover {
	text-decoration: underline;
}

.gpgpl-design-card-nolink {
	font-size: 0.76rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
	margin-top: 0.15rem;
}

/* ---------- Section heading shared by wildlife/maintenance/export ---------- */

.gpgpl-wildlife-section,
.gpgpl-maintenance-section,
.gpgpl-export-section {
	padding: 1rem 1.25rem 1.5rem;
	border-top: 1px solid var(--gpgpl-border);
	background: var(--gpgpl-paper-panel);
}

.gpgpl-section-title {
	font-family: var(--gpgpl-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	margin: 0 0 0.75rem;
}

.gpgpl-wildlife-empty[hidden],
.gpgpl-maintenance-empty[hidden] {
	display: none;
}

.gpgpl-wildlife-empty,
.gpgpl-maintenance-empty {
	font-size: 0.85rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
	margin: 0;
}

/* ---------- Wildlife value ---------- */

.gpgpl-wildlife-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.gpgpl-wildlife-badge {
	background: #FCF9F3;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	padding: 0.25rem 0.75rem;
	font-size: 0.8rem;
	color: var(--gpgpl-leaf-dark);
	font-weight: 600;
}

.gpgpl-wildlife-terms,
.gpgpl-wildlife-rating {
	font-size: 0.85rem;
	color: var(--gpgpl-ink);
	margin: 0.3rem 0;
}

/* ---------- Monthly maintenance ---------- */

.gpgpl-maintenance-month {
	margin-bottom: 1rem;
}

.gpgpl-maintenance-month:last-child {
	margin-bottom: 0;
}

.gpgpl-maintenance-month-name {
	font-family: var(--gpgpl-font-display);
	font-size: 0.95rem;
	color: var(--gpgpl-leaf-dark);
	margin: 0 0 0.35rem;
}

.gpgpl-maintenance-tasks {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.85rem;
	color: var(--gpgpl-ink);
}

.gpgpl-maintenance-tasks li {
	margin-bottom: 0.2rem;
}

/* ---------- Export ---------- */

.gpgpl-export-note {
	font-size: 0.82rem;
	color: var(--gpgpl-ink-soft);
	margin: 0 0 0.85rem;
}

.gpgpl-export-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.gpgpl-export-actions .gpgpl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

/* ---------- Print report (hidden on screen, shown only when printing) ---------- */

.gpgpl-print-report {
	display: none;
}

@media print {
	.gpgpl-app > *:not(.gpgpl-print-report) {
		display: none !important;
	}

	.gpgpl-print-report {
		display: block !important;
	}
}

/* ---------- View switch (Plan / 3D) + full screen ---------- */

.gpgpl-view-bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

.gpgpl-fullscreen-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: var(--gpgpl-paper-panel);
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-fullscreen-btn:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-fullscreen-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-fs-exit,
.gpgpl-fullscreen-btn.is-active .gpgpl-fs-enter {
	display: none;
}

.gpgpl-fullscreen-btn.is-active .gpgpl-fs-exit {
	display: block;
}

.gpgpl-view-switch {
	display: inline-flex;
	gap: 0.25rem;
	padding: 0.25rem;
	margin-bottom: 0.6rem;
	background: var(--gpgpl-paper-panel);
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
}

.gpgpl-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.82rem;
	font-weight: 600;
	padding: 0.4rem 0.8rem;
	border: none;
	border-radius: calc(var(--gpgpl-radius-s) - 4px);
	background: transparent;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-view-btn:hover {
	color: var(--gpgpl-ink);
}

.gpgpl-view-btn.is-active {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-view-btn[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.gpgpl-view-btn:focus-visible,
.gpgpl-3d-preset:focus-visible,
.gpgpl-3d-canvas:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-canvas-scale-wrap[hidden],
.gpgpl-front-label[hidden] {
	display: none;
}

.gpgpl-front-label {
	margin: 0.3rem 0 0;
	text-align: center;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-front-label span {
	font-size: 0.6rem;
}

/* ---------- 3D view ---------- */

.gpgpl-3d-wrap[hidden] {
	display: none;
}

.gpgpl-3d-stage {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 70vh;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-m);
	overflow: hidden;
	background: #E2E8D3;
}

@media (min-width: 720px) {
	.gpgpl-3d-stage {
		aspect-ratio: 16 / 10;
	}
}

.gpgpl-3d-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}

.gpgpl-3d-canvas:active {
	cursor: grabbing;
}

.gpgpl-3d-labels {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

.gpgpl-3d-labels[hidden] {
	display: none;
}

.gpgpl-3d-label {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 140px;
	padding: 0.15rem 0.45rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 1px 4px rgba(51, 41, 31, 0.2);
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-3d-status {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	text-align: center;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	background: #E2E8D3;
}

.gpgpl-3d-status.is-error {
	color: var(--gpgpl-clay-dark);
}

.gpgpl-3d-status[hidden],
.gpgpl-3d-help[hidden] {
	display: none;
}

.gpgpl-3d-help {
	position: absolute;
	left: 50%;
	bottom: 0.6rem;
	transform: translateX(-50%);
	width: max-content;
	max-width: calc(100% - 1.2rem);
	margin: 0;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: rgba(51, 41, 31, 0.72);
	color: #FCF9F3;
	font-size: 0.7rem;
	text-align: center;
	pointer-events: none;
}

.gpgpl-3d-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	margin-top: 0.6rem;
}

.gpgpl-3d-presets {
	display: inline-flex;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	overflow: hidden;
	background: var(--gpgpl-paper-panel);
}

.gpgpl-3d-preset {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.4rem 0.7rem;
	border: none;
	border-right: 1px solid var(--gpgpl-border);
	background: transparent;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-3d-preset:last-child {
	border-right: none;
}

.gpgpl-3d-preset:hover {
	color: var(--gpgpl-ink);
	background: var(--gpgpl-paper);
}

.gpgpl-3d-preset.is-active {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-3d-control-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-3d-growth-wrap,
.gpgpl-3d-bed-height-wrap,
.gpgpl-3d-labels-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--gpgpl-ink);
}

.gpgpl-3d-growth {
	width: 120px;
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-3d-growth-value {
	min-width: 5.5em;
	font-size: 0.75rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-3d-bed-height {
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	padding: 0.35rem 0.4rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

.gpgpl-3d-labels-wrap input {
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-3d-snapshot {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: auto;
}

.gpgpl-print-report .gpgpl-report-3d {
	display: block;
	max-width: 100%;
}

/* Month slider + play */

.gpgpl-3d-month-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.gpgpl-3d-month-label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	color: var(--gpgpl-ink);
}

.gpgpl-3d-month {
	width: 150px;
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-3d-month-value {
	min-width: 5.5em;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-3d-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	cursor: pointer;
	flex-shrink: 0;
}

.gpgpl-3d-play:hover {
	background: var(--gpgpl-leaf-dark);
}

.gpgpl-3d-play:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-3d-pause-icon,
.gpgpl-3d-play.is-playing .gpgpl-3d-play-icon {
	display: none;
}

.gpgpl-3d-play.is-playing .gpgpl-3d-pause-icon {
	display: block;
}

@media (max-width: 480px) {
	.gpgpl-3d-month-wrap,
	.gpgpl-3d-month-label {
		width: 100%;
	}

	.gpgpl-3d-month {
		flex: 1;
		width: auto;
	}

	.gpgpl-3d-toolbar {
		gap: 0.5rem;
	}

	.gpgpl-3d-presets {
		width: 100%;
	}

	.gpgpl-3d-preset {
		flex: 1;
	}

	.gpgpl-3d-growth-wrap {
		width: 100%;
	}

	.gpgpl-3d-growth {
		flex: 1;
		width: auto;
	}

	.gpgpl-3d-snapshot {
		margin-left: 0;
	}
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
	.gpgpl-app {
		margin: 1rem 0;
		border-radius: 0;
	}

	.gpgpl-header {
		padding: 0.85rem 1rem;
	}

	.gpgpl-header h2 {
		font-size: 1.15rem;
	}

	.gpgpl-design-area {
		padding: 0.65rem 0.75rem 0.5rem;
		border-radius: 0;
	}

	.gpgpl-bed-config,
	.gpgpl-hint,
	.gpgpl-scale-note,
	.gpgpl-design-list,
	.gpgpl-wildlife-section,
	.gpgpl-maintenance-section,
	.gpgpl-export-section {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.gpgpl-shape-toolbar {
		margin-left: 1rem;
		margin-right: 1rem;
	}
}

@media (max-width: 480px) {
	.gpgpl-palette {
		padding: 0.65rem 0.75rem;
	}

	.gpgpl-bed-config,
	.gpgpl-hint,
	.gpgpl-scale-note,
	.gpgpl-design-list,
	.gpgpl-wildlife-section,
	.gpgpl-maintenance-section,
	.gpgpl-export-section {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
	}

	.gpgpl-shape-toolbar {
		margin-left: 0.75rem;
		margin-right: 0.75rem;
	}

	.gpgpl-header-controls {
		width: 100%;
		justify-content: space-between;
	}

	.gpgpl-bed-config {
		gap: 0.5rem;
	}

	.gpgpl-bed-size-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.gpgpl-bed-size-select {
		font-size: 0.8rem;
		padding: 0.35rem 0.4rem;
	}

	.gpgpl-shape-edit-toggle {
		padding: 0.4rem 0.6rem;
		font-size: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-btn,
	.gpgpl-plant-token,
	.gpgpl-added-chevron {
		transition: none;
	}
}

/* =====================================================================
   App shell — full-screen-first layout (v2)
   The design area is the whole app: the plan or 3D view fills the frame
   edge to edge, and every control floats over it — view switch top left,
   full screen + add top right, a dock of tools along the bottom, pop-up
   sliders above the dock, and panels that slide in for adding plants and
   for the design's info. On the page the frame is one screen tall; the
   full-screen button takes it to the whole display.
   Kept at the end of the file so it wins over the older page-flow rules.
   ===================================================================== */

.gpgpl-app {
	max-width: none;
	margin: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	--gpgpl-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
	--gpgpl-dur: 0.28s;
	--gpgpl-pad-t: max(0.75rem, env(safe-area-inset-top));
	--gpgpl-pad-r: max(0.75rem, env(safe-area-inset-right));
	--gpgpl-pad-b: max(0.75rem, env(safe-area-inset-bottom));
	--gpgpl-pad-l: max(0.75rem, env(safe-area-inset-left));
	--gpgpl-ctl: 48px;           /* dock / top button size */
	--gpgpl-dock-h: 64px;        /* dock height incl. padding (JS measures the real one) */
	--gpgpl-glass: rgba(255, 255, 255, 0.94);
	--gpgpl-float-shadow: 0 6px 20px rgba(51, 41, 31, 0.18);
}

/* ---------- Frame ---------- */

.gpgpl-design-area {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 320px;
	margin: 0;
	padding: 0; /* JS sets top/bottom padding to keep the plan clear of the bars */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border: none;
	border-radius: 0;
	background: var(--gpgpl-paper);
	isolation: isolate;
}

.gpgpl-design-area.is-view-3d {
	background: #E2E8D3;
}

html.gpgpl-noscroll,
html.gpgpl-noscroll body {
	overflow: hidden;
}

.gpgpl-design-area.is-fullscreen {
	position: fixed;
	inset: 0;
	z-index: 999999;
	height: 100%;
	min-height: 0;
	overscroll-behavior: none;
}

.gpgpl-design-area.is-fullscreen::backdrop {
	background: var(--gpgpl-paper);
}

/* ---------- Stage ---------- */

.gpgpl-design-area .gpgpl-canvas-scale-wrap {
	flex-shrink: 0;
	max-width: 100%;
	margin: 0;
	border-radius: 10px;
	transition: opacity var(--gpgpl-dur) ease;
}

.gpgpl-design-area .gpgpl-front-label {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: var(--gpgpl-front-label-top, auto); /* set by JS just under the plan */
	z-index: 1;
	margin: 0;
	white-space: nowrap;
	pointer-events: none;
}

.gpgpl-design-area .gpgpl-3d-wrap:not([hidden]) {
	position: absolute;
	inset: 0;
	display: block;
	animation: gpgpl-fade-in var(--gpgpl-dur) ease;
}

.gpgpl-design-area .gpgpl-3d-stage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	max-height: none;
	border: none;
	border-radius: 0;
}

.gpgpl-design-area .gpgpl-3d-help {
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 0.5rem);
}

.gpgpl-design-area .gpgpl-hint {
	position: absolute;
	left: 50%;
	bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 0.9rem);
	transform: translateX(-50%);
	z-index: 2;
	max-width: calc(100% - 2rem);
	width: max-content;
	margin: 0;
	padding: 0.4rem 0.85rem;
	border-radius: 999px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
	text-align: center;
	pointer-events: none;
	transition: opacity var(--gpgpl-dur) ease;
}

.gpgpl-design-area.is-view-3d .gpgpl-hint {
	display: none;
}

@keyframes gpgpl-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Pop-ups and panels take over from the 3D help pill */
.gpgpl-design-area.has-pop .gpgpl-3d-help,
.gpgpl-design-area.has-panel .gpgpl-3d-help,
.gpgpl-design-area.has-pop .gpgpl-hint {
	opacity: 0;
}

.gpgpl-design-area .gpgpl-3d-help {
	transition: opacity var(--gpgpl-dur) ease;
}

/* ---------- Floating controls: shared look ---------- */

.gpgpl-view-bar,
.gpgpl-dock,
.gpgpl-shape-toolbar {
	transition: opacity var(--gpgpl-dur) ease, transform var(--gpgpl-dur) var(--gpgpl-ease);
}

/* Top bar */
.gpgpl-design-area .gpgpl-view-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	padding: var(--gpgpl-pad-t) var(--gpgpl-pad-r) 0 var(--gpgpl-pad-l);
	pointer-events: none;
}

.gpgpl-design-area .gpgpl-view-bar > * {
	pointer-events: auto;
}

.gpgpl-design-area .gpgpl-view-switch {
	margin: 0;
	padding: 0.3rem;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
}

.gpgpl-design-area .gpgpl-view-btn {
	padding: 0.55rem 0.95rem;
	border-radius: 12px;
	font-size: 0.9rem;
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease;
}

.gpgpl-top-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.6rem;
	pointer-events: none;
}

.gpgpl-top-actions > * {
	pointer-events: auto;
}

@media (orientation: landscape) and (max-height: 600px) {
	/* Short landscape screens: + sits beside full screen to save height */
	.gpgpl-top-actions {
		flex-direction: row-reverse;
		align-items: flex-start;
	}
}

.gpgpl-design-area .gpgpl-fullscreen-btn {
	width: var(--gpgpl-ctl);
	height: var(--gpgpl-ctl);
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
}

/* + button and its menu */
.gpgpl-add-wrap {
	position: relative;
}

.gpgpl-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--gpgpl-ctl) + 6px);
	height: calc(var(--gpgpl-ctl) + 6px);
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	box-shadow: 0 8px 22px rgba(74, 106, 52, 0.35);
	cursor: pointer;
	transition: transform var(--gpgpl-dur) var(--gpgpl-ease), background var(--gpgpl-dur) ease;
}

.gpgpl-add-btn:hover {
	background: #4A6A34;
}

.gpgpl-add-btn[aria-expanded="true"] {
	transform: rotate(45deg);
	background: var(--gpgpl-leaf-dark);
}

.gpgpl-add-btn:focus-visible,
.gpgpl-dock-btn:focus-visible,
.gpgpl-add-menu-item:focus-visible,
.gpgpl-panel-close:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-add-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	min-width: 220px;
	padding: 0.4rem;
	border-radius: 16px;
	background: #FCF9F3;
	box-shadow: 0 14px 36px rgba(51, 41, 31, 0.24);
	transform-origin: top right;
	opacity: 0;
	transform: scale(0.92) translateY(-6px);
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.24s var(--gpgpl-ease), visibility 0s linear 0.24s;
}

.gpgpl-add-menu.is-open {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 0s;
}

@media (orientation: landscape) and (max-height: 600px) {
	.gpgpl-add-menu {
		right: 0;
	}
}

.gpgpl-add-menu-item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: none;
	border-radius: 11px;
	background: transparent;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.92rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.gpgpl-add-menu-item:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-add-menu-item svg {
	color: var(--gpgpl-leaf);
	flex-shrink: 0;
}

/* ---------- Dock ---------- */

.gpgpl-dock {
	position: absolute;
	left: 50%;
	bottom: var(--gpgpl-pad-b);
	z-index: 20;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r));
}

.gpgpl-dock-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gpgpl-design-area.is-view-plan .gpgpl-dock-3d,
.gpgpl-design-area.is-view-3d .gpgpl-dock-plan {
	display: none;
}

.gpgpl-dock-group {
	animation: gpgpl-fade-in var(--gpgpl-dur) ease; /* replays each time a view's tools appear */
}

.gpgpl-dock-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gpgpl-ctl);
	height: var(--gpgpl-ctl);
	padding: 0;
	flex-shrink: 0;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	color: var(--gpgpl-ink);
	box-shadow: var(--gpgpl-float-shadow);
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-dock-btn:active {
	transform: scale(0.94);
}

.gpgpl-dock-btn[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-dock-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
	transform: none;
}

.gpgpl-design-area .gpgpl-3d-presets {
	display: inline-flex;
	height: var(--gpgpl-ctl);
	border: none;
	border-radius: 14px;
	overflow: hidden;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
}

.gpgpl-design-area .gpgpl-3d-preset {
	flex: none;
	padding: 0 0.9rem;
	font-size: 0.92rem;
	border-right: 1px solid rgba(51, 41, 31, 0.08);
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease;
}

@media (max-width: 380px) {
	.gpgpl-app {
		--gpgpl-ctl: 44px;
	}

	.gpgpl-design-area .gpgpl-3d-preset {
		padding: 0 0.6rem;
		font-size: 0.84rem;
	}

	.gpgpl-dock,
	.gpgpl-dock-group {
		gap: 0.35rem;
	}
}

/* ---------- Pop-up sliders (above the dock) ---------- */

.gpgpl-pop {
	position: absolute;
	left: 50%;
	bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 0.75rem);
	z-index: 19;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min(460px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	padding: 0.8rem 1rem;
	border-radius: 18px;
	background: var(--gpgpl-glass);
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.22);
	opacity: 0;
	transform: translate(-50%, 14px) scale(0.98);
	visibility: hidden;
	transition: opacity 0.22s ease, transform var(--gpgpl-dur) var(--gpgpl-ease), visibility 0s linear var(--gpgpl-dur);
}

.gpgpl-pop.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
	visibility: visible;
	transition-delay: 0s;
}

.gpgpl-pop input[type="range"] {
	flex: 1;
	min-width: 0;
	width: auto;
	height: 28px;
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-pop-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-pop .gpgpl-3d-month-value,
.gpgpl-pop .gpgpl-3d-growth-value {
	min-width: 6.2em;
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
	text-align: right;
}

.gpgpl-pop .gpgpl-3d-play {
	width: 40px;
	height: 40px;
}

.gpgpl-pop-bed {
	display: block;
}

.gpgpl-pop-bed .gpgpl-bed-config {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.65rem;
	padding: 0;
	border: none;
	background: transparent;
}

.gpgpl-pop-bed .gpgpl-bed-size {
	justify-content: space-between;
}

.gpgpl-pop-bed .gpgpl-bed-size-select {
	flex: 1;
	font-size: 0.92rem;
	padding: 0.5rem 0.6rem;
}

.gpgpl-pop-bed .gpgpl-bed-size-label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	font-weight: 700;
}

.gpgpl-bed-actions {
	display: flex;
	gap: 0.5rem;
}

.gpgpl-bed-actions .gpgpl-btn {
	flex: 1;
	justify-content: center;
	margin: 0;
}

.gpgpl-pop-bed .gpgpl-custom-size {
	flex-wrap: wrap;
}

/* ---------- Panels (add plants, my design) ---------- */

.gpgpl-panel {
	position: absolute;
	z-index: 30;
	display: flex;
	flex-direction: column;
	background: #FCF9F3;
	box-shadow: 0 18px 50px rgba(51, 41, 31, 0.28);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.22s ease, transform 0.34s var(--gpgpl-ease), visibility 0s linear 0.34s;
}

.gpgpl-panel.is-open {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

/* Wide / landscape: slide in from the right as a side panel */
.gpgpl-panel {
	top: var(--gpgpl-pad-t);
	right: var(--gpgpl-pad-r);
	bottom: var(--gpgpl-pad-b);
	width: min(420px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	border-radius: 22px;
	transform: translateX(24px);
}

/* Portrait phones: a sheet that slides up from the bottom */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 88%;
		height: 88%;
		border-radius: 24px 24px 0 0;
		transform: translateY(40px);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.gpgpl-add-panel {
		height: 75%;
	}
}

.gpgpl-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1rem 0.6rem 1.25rem;
	flex-shrink: 0;
}

.gpgpl-panel-title {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-panel-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-panel-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 0 1.25rem 1.25rem;
}

.gpgpl-panel-body > section,
.gpgpl-panel-body .gpgpl-palette {
	padding: 1rem 0 0.5rem;
	border-top: 1px solid var(--gpgpl-border);
	background: transparent;
}

.gpgpl-panel-body .gpgpl-palette {
	border-top: none;
	padding-top: 0.25rem;
}

.gpgpl-panel-body > .gpgpl-scale-note + section {
	border-top: none;
}

.gpgpl-panel-body .gpgpl-scale-note {
	margin: 0 0 0.25rem;
	padding: 0;
}

.gpgpl-panel-body .gpgpl-design-list-grid {
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

.gpgpl-panel-body .gpgpl-search-results {
	max-height: none;
}

/* Add panel modes: "search" shows search + your plants; "custom" the form */
.gpgpl-add-panel.is-mode-custom .gpgpl-palette-search,
.gpgpl-add-panel.is-mode-custom .gpgpl-added-wrap,
.gpgpl-add-panel.is-mode-custom .gpgpl-add-plant-toggle {
	display: none;
}

.gpgpl-add-panel .gpgpl-add-plant-toggle {
	margin-top: 0.25rem;
}

/* Settings rows */
.gpgpl-setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.45rem 0;
	font-size: 0.88rem;
	color: var(--gpgpl-ink);
}

.gpgpl-setting-label {
	font-weight: 600;
}

.gpgpl-settings-section .gpgpl-unit-toggle {
	border-color: var(--gpgpl-border);
}

.gpgpl-settings-section .gpgpl-unit-btn {
	color: var(--gpgpl-ink-soft);
}

.gpgpl-settings-section .gpgpl-unit-btn.is-active {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-settings-section .gpgpl-3d-bed-height-wrap {
	width: 100%;
	justify-content: space-between;
}

.gpgpl-settings-section .gpgpl-3d-control-label {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-settings-section .gpgpl-3d-labels-wrap {
	font-size: 0.88rem;
	font-weight: 600;
	gap: 0.55rem;
}

.gpgpl-export-actions {
	flex-wrap: wrap;
}

.gpgpl-panel-body .gpgpl-3d-snapshot {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0;
}

/* Scrim behind panels on phones */
.gpgpl-scrim {
	position: absolute;
	inset: 0;
	z-index: 25;
	background: rgba(51, 41, 31, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--gpgpl-dur) ease, visibility 0s linear var(--gpgpl-dur);
}

.gpgpl-design-area.has-panel .gpgpl-scrim {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

@media (min-width: 701px), (orientation: landscape) {
	.gpgpl-design-area.has-panel .gpgpl-scrim {
		background: rgba(51, 41, 31, 0.12);
	}
}

/* ---------- Selected plant card ---------- */

.gpgpl-design-area .gpgpl-selected-panel {
	position: absolute;
	z-index: 22;
	left: var(--gpgpl-pad-l);
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 1rem);
	width: min(340px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-ctl) * 2 - var(--gpgpl-pad-b) - 2.5rem);
	margin: 0;
	overflow: auto;
	border: none;
	box-shadow: 0 12px 34px rgba(51, 41, 31, 0.25);
	animation: gpgpl-card-in var(--gpgpl-dur) var(--gpgpl-ease);
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-design-area .gpgpl-selected-panel {
		top: auto;
		left: var(--gpgpl-pad-l);
		right: var(--gpgpl-pad-r);
		width: auto;
		bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 0.75rem);
		max-height: 40%;
	}

	/* A slider pop-up takes the card's place while it's open */
	.gpgpl-design-area.has-pop .gpgpl-selected-panel {
		bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 5.2rem);
	}
}

@keyframes gpgpl-card-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* ---------- Bed shape editing ---------- */

.gpgpl-design-area .gpgpl-shape-toolbar {
	position: absolute;
	left: 50%;
	bottom: var(--gpgpl-pad-b);
	z-index: 21;
	transform: translateX(-50%);
	width: min(640px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	margin: 0;
	border: none;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.22);
	animation: gpgpl-card-in var(--gpgpl-dur) var(--gpgpl-ease);
}

.gpgpl-design-area.is-shape-editing .gpgpl-dock,
.gpgpl-design-area.is-shape-editing .gpgpl-top-actions,
.gpgpl-design-area.is-shape-editing .gpgpl-hint {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

/* ---------- Full screen: controls fade after a few seconds ---------- */

.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-view-bar,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-dock,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-3d-help,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-front-label {
	opacity: 0;
	pointer-events: none;
}

.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-view-bar > *,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-top-actions > * {
	pointer-events: none;
}

.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-dock {
	transform: translate(-50%, 12px);
}

/* "Rotate your phone" tip */
.gpgpl-rotate-tip {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 40;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 1rem 1.3rem;
	border-radius: 14px;
	background: rgba(51, 41, 31, 0.82);
	color: #FCF9F3;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.gpgpl-rotate-tip.is-visible {
	opacity: 1;
}

.gpgpl-rotate-tip[hidden] {
	display: none;
}

.gpgpl-rotate-tip svg {
	animation: gpgpl-rotate-hint 1.6s ease-in-out infinite;
}

@keyframes gpgpl-rotate-hint {
	0%, 20% { transform: rotate(0deg); }
	50%, 70% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-app {
		--gpgpl-dur: 0.01s;
	}

	.gpgpl-rotate-tip svg,
	.gpgpl-design-area .gpgpl-selected-panel,
	.gpgpl-design-area .gpgpl-shape-toolbar,
	.gpgpl-design-area .gpgpl-3d-wrap:not([hidden]) {
		animation: none;
	}
}

/* ---------- No zoom-in when typing on phones ----------
   iPhones zoom the page in when a text box smaller than 16px gets focus,
   and don't zoom back out afterwards — which left the designer cropped.
   16px text on touch devices stops that zoom from happening at all. */
@media (pointer: coarse) {
	.gpgpl-app .gpgpl-design-area input[type="text"],
	.gpgpl-app .gpgpl-design-area input[type="search"],
	.gpgpl-app .gpgpl-design-area input[type="number"],
	.gpgpl-app .gpgpl-design-area input[type="email"],
	.gpgpl-app .gpgpl-design-area select,
	.gpgpl-app .gpgpl-design-area textarea {
		font-size: 16px;
	}
}

/* ---------- Pop-up sliders: big dark thumbs for touch ---------- */

.gpgpl-pop input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 40px;
	padding: 0;
	margin: 0;
	background: transparent;
	cursor: pointer;
	touch-action: none; /* dragging the thumb mustn't scroll or pan */
	--gpgpl-fill: 50%;
	--gpgpl-thumb: 28px;
	--gpgpl-track: linear-gradient(to right, var(--gpgpl-leaf) 0, var(--gpgpl-leaf) var(--gpgpl-fill), #E2D6C2 var(--gpgpl-fill), #E2D6C2 100%);
}

@media (pointer: coarse) {
	.gpgpl-pop input[type="range"] {
		--gpgpl-thumb: 34px;
		height: 44px;
	}
}

.gpgpl-pop input[type="range"]:focus {
	outline: none;
}

.gpgpl-pop input[type="range"]::-webkit-slider-runnable-track {
	height: 8px;
	border-radius: 999px;
	background: var(--gpgpl-track);
}

.gpgpl-pop input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--gpgpl-thumb);
	height: var(--gpgpl-thumb);
	margin-top: calc((8px - var(--gpgpl-thumb)) / 2);
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: #33291F;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	transition: transform 0.12s ease;
}

.gpgpl-pop input[type="range"]:active::-webkit-slider-thumb {
	transform: scale(1.1);
}

.gpgpl-pop input[type="range"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--gpgpl-gold), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.gpgpl-pop input[type="range"]::-moz-range-track {
	height: 8px;
	border-radius: 999px;
	background: #E2D6C2;
}

.gpgpl-pop input[type="range"]::-moz-range-progress {
	height: 8px;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
}

.gpgpl-pop input[type="range"]::-moz-range-thumb {
	width: var(--gpgpl-thumb);
	height: var(--gpgpl-thumb);
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: #33291F;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}

/* ---------- Dock fits five controls on narrow phones ---------- */

@media (max-width: 430px) {
	.gpgpl-app {
		--gpgpl-ctl: 44px;
	}

	.gpgpl-dock,
	.gpgpl-dock-group {
		gap: 0.35rem;
	}

	.gpgpl-design-area .gpgpl-3d-preset {
		padding: 0 0.55rem;
		font-size: 0.84rem;
	}
}

@media (max-width: 360px) {
	.gpgpl-app {
		--gpgpl-ctl: 40px;
	}

	.gpgpl-design-area .gpgpl-3d-preset {
		padding: 0 0.45rem;
		font-size: 0.8rem;
	}
}

/* ---------- Short messages (e.g. "2 plants were moved…") ---------- */

.gpgpl-toast {
	position: absolute;
	left: 50%;
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 0.9rem);
	z-index: 45;
	max-width: calc(100% - 2rem);
	width: max-content;
	padding: 0.55rem 0.95rem;
	border-radius: 999px;
	background: rgba(51, 41, 31, 0.9);
	color: #FCF9F3;
	font-size: 0.85rem;
	font-weight: 600;
	text-align: center;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -6px);
	transition: opacity 0.25s ease, transform 0.3s var(--gpgpl-ease);
}

.gpgpl-toast.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-toast {
		transition: none;
	}
}

/* =====================================================================
   Free vs Premium
   ===================================================================== */

/* Padlock on locked buttons */
.gpgpl-shape-edit-toggle.is-locked,
.gpgpl-dock-btn.is-locked,
.gpgpl-btn.gpgpl-plan-download.is-locked,
.gpgpl-btn.gpgpl-export-print.is-locked,
.gpgpl-btn.gpgpl-export-download.is-locked {
	position: relative;
}

.gpgpl-shape-edit-toggle.is-locked::after,
.gpgpl-dock-btn.is-locked::after,
.gpgpl-btn.gpgpl-plan-download.is-locked::after,
.gpgpl-btn.gpgpl-export-print.is-locked::after,
.gpgpl-btn.gpgpl-export-download.is-locked::after {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	width: 18px;
	height: 18px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 10V8a4 4 0 1 1 8 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zm2 0h4V8a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / 11px no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* "2 of 3 plants used" in the add-plants panel */
.gpgpl-plan-meter {
	margin: 0 0 0.9rem;
	padding: 0.7rem 0.85rem;
	border-radius: 14px;
	background: var(--gpgpl-paper);
}

.gpgpl-plan-meter-text {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.85rem;
	color: var(--gpgpl-ink);
}

.gpgpl-plan-meter-text span {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-plan-meter-bar {
	height: 6px;
	margin: 0.5rem 0 0.55rem;
	border-radius: 999px;
	background: #E2E8D3;
	overflow: hidden;
}

.gpgpl-plan-meter-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gpgpl-leaf);
	transition: width 0.35s var(--gpgpl-ease);
}

.gpgpl-plan-meter.is-full .gpgpl-plan-meter-bar span {
	background: var(--gpgpl-gold);
}

.gpgpl-plan-meter-link {
	padding: 0;
	border: none;
	background: none;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* The "Go Premium" pop-up */
.gpgpl-upgrade {
	position: absolute;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gpgpl-pad-t) var(--gpgpl-pad-r) var(--gpgpl-pad-b) var(--gpgpl-pad-l);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.3s;
}

.gpgpl-upgrade.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.gpgpl-upgrade-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(51, 41, 31, 0.5);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gpgpl-upgrade.is-open .gpgpl-upgrade-backdrop {
	opacity: 1;
}

.gpgpl-upgrade-card {
	position: relative;
	width: min(360px, 100%);
	max-height: 100%;
	overflow-y: auto;
	padding: 1.6rem 1.4rem 1.1rem;
	border-radius: 22px;
	background: #FCF9F3;
	text-align: center;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: translateY(14px) scale(0.97);
	transition: opacity 0.22s ease, transform 0.3s var(--gpgpl-ease);
}

.gpgpl-upgrade.is-open .gpgpl-upgrade-card {
	opacity: 1;
	transform: none;
}

.gpgpl-upgrade-close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-upgrade-close:hover {
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
}

.gpgpl-upgrade-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 0.7rem;
	border-radius: 50%;
	background: #FFF2DC;
	color: #E09A1F;
}

.gpgpl-upgrade-title {
	margin: 0 0 0.45rem;
	font-family: var(--gpgpl-font-display);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--gpgpl-ink);
}

.gpgpl-upgrade-body {
	margin: 0 0 0.9rem;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-upgrade-perks {
	margin: 0 0 1.1rem;
	padding: 0;
	list-style: none;
	text-align: left;
}

.gpgpl-upgrade-perks:empty {
	display: none;
}

.gpgpl-upgrade-perks li {
	position: relative;
	padding: 0.3rem 0 0.3rem 1.7rem;
	font-size: 0.9rem;
	color: var(--gpgpl-ink);
}

.gpgpl-upgrade-perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4rem;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--gpgpl-leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.gpgpl-upgrade-go {
	display: block;
	padding: 0.8rem 1rem;
	border-radius: 14px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-upgrade-go:hover,
.gpgpl-upgrade-go:focus {
	background: #4A6A34;
	color: #FCF9F3;
}

.gpgpl-upgrade-login {
	margin: 0.8rem 0 0;
	font-size: 0.88rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-upgrade-login[hidden] {
	display: none;
}

.gpgpl-upgrade-login a {
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-upgrade-later {
	margin-top: 0.5rem;
	padding: 0.55rem 1rem;
	border: none;
	background: none;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-upgrade-later:hover {
	color: var(--gpgpl-ink);
}

.gpgpl-upgrade-go:focus-visible,
.gpgpl-upgrade-later:focus-visible,
.gpgpl-upgrade-close:focus-visible,
.gpgpl-plan-meter-link:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-upgrade-card,
	.gpgpl-upgrade-backdrop,
	.gpgpl-plan-meter-bar span {
		transition: none;
	}
}


/* =====================================================================
   Saved designs: the chip under the view switch and the "My designs" panel
   ===================================================================== */

.gpgpl-design-area .gpgpl-view-left {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
	pointer-events: none;
}

.gpgpl-design-area .gpgpl-view-left > * {
	pointer-events: auto;
}

.gpgpl-design-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	max-width: min(260px, 52vw);
	min-height: 40px;
	margin: 0;
	padding: 0.3rem 0.55rem 0.3rem 0.5rem;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	text-align: left;
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-design-chip:hover {
	background: #FCF9F3;
}

.gpgpl-design-chip:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-design-chip-icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 9px;
	background: var(--gpgpl-paper);
	color: var(--gpgpl-leaf);
}

.gpgpl-design-chip.is-limit .gpgpl-design-chip-icon,
.gpgpl-design-chip.is-offline .gpgpl-design-chip-icon,
.gpgpl-design-chip.is-expired .gpgpl-design-chip-icon,
.gpgpl-design-chip.is-error .gpgpl-design-chip-icon {
	background: #FFF1D6;
	color: #9A6200;
}

.gpgpl-design-chip.is-local .gpgpl-design-chip-icon {
	color: var(--gpgpl-ink-soft);
}

.gpgpl-design-chip-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.gpgpl-design-chip-name {
	overflow: hidden;
	font-size: 0.82rem;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-design-chip-status {
	overflow: hidden;
	font-size: 0.7rem;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-design-chip > svg {
	flex: 0 0 auto;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-spin {
	animation: gpgpl-spin 0.9s linear infinite;
}

@keyframes gpgpl-spin {
	to { transform: rotate(360deg); }
}

/* Make room for the chip under the top bar */
.gpgpl-design-area .gpgpl-selected-panel {
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 3.4rem);
	max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-ctl) * 2 - var(--gpgpl-pad-b) - 5rem);
}

.gpgpl-toast {
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 3.2rem);
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-design-area .gpgpl-selected-panel {
		top: auto;
		max-height: 40%;
	}
}

/* Short landscape phones: the chip shrinks to its icon and name */
@media (orientation: landscape) and (max-height: 460px) {
	.gpgpl-design-chip-status {
		display: none;
	}

	.gpgpl-design-chip {
		min-height: 34px;
	}
}

.gpgpl-design-area.is-shape-editing .gpgpl-design-chip {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---- My designs panel ---- */

.gpgpl-designs-panel .gpgpl-panel-body {
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
}

.gpgpl-acc-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.gpgpl-acc-foot .gpgpl-acc-small {
	margin: 0;
}

.gpgpl-acc-section {
	margin: 0 0 1.1rem;
	padding: 0 0 1.1rem;
	border-bottom: 1px solid var(--gpgpl-border);
}

.gpgpl-acc-section:last-child {
	border-bottom: none;
}

.gpgpl-acc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) h4 {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-acc-count {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-acc-label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-acc-name {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 12px;
	background: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 16px; /* stops iPhones zooming in */
	font-weight: 600;
	color: var(--gpgpl-ink);
}

:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-acc-name:focus {
	border-color: var(--gpgpl-leaf);
	outline: none;
	box-shadow: 0 0 0 3px rgba(74, 106, 52, 0.18);
}

.gpgpl-acc-status {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-acc-status.is-saved::before {
	content: '✓ ';
	color: var(--gpgpl-leaf);
	font-weight: 700;
}

.gpgpl-acc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	text-decoration: none;
}

.gpgpl-acc-note {
	margin: 0.75rem 0 0;
	padding: 0.75rem 0.85rem;
	border-radius: 14px;
	background: var(--gpgpl-paper);
	font-size: 0.85rem;
	line-height: 1.45;
}

.gpgpl-acc-note.is-warn {
	background: #FFF6E6;
}

.gpgpl-acc-note p {
	margin: 0 0 0.6rem;
}

.gpgpl-acc-note p:last-child {
	margin-bottom: 0;
}

.gpgpl-acc-meter {
	margin-top: 0;
}

.gpgpl-acc-list {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
}

.gpgpl-acc-item {
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 1px solid var(--gpgpl-border);
	border-radius: 14px;
	overflow: hidden;
	background: #FCF9F3;
}

.gpgpl-acc-item.is-current {
	border-color: var(--gpgpl-leaf);
	box-shadow: 0 0 0 2px rgba(74, 106, 52, 0.15);
}

.gpgpl-acc-open {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	padding: 0.5rem 0.6rem;
	border: none;
	background: none;
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	text-align: left;
	cursor: pointer;
}

.gpgpl-acc-open:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-acc-thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 52px;
	border-radius: 10px;
	background: #F6F3EA;
}

.gpgpl-acc-item-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 0.15rem;
}

.gpgpl-acc-item-text strong {
	overflow: hidden;
	font-size: 0.9rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-acc-item-text span {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-acc-delete {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: none;
	border-left: 1px solid var(--gpgpl-border);
	background: none;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-acc-delete:hover {
	background: #FDECEA;
	color: var(--gpgpl-clay-dark);
}

.gpgpl-acc-switch {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	margin: 0 0 0.9rem;
	cursor: pointer;
}

.gpgpl-acc-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gpgpl-acc-switch-ui {
	position: relative;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	margin-top: 0.1rem;
	border-radius: 999px;
	background: #E2D6C2;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-acc-switch-ui::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FCF9F3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform var(--gpgpl-dur) var(--gpgpl-ease);
}

.gpgpl-acc-switch input:checked + .gpgpl-acc-switch-ui {
	background: var(--gpgpl-leaf);
}

.gpgpl-acc-switch input:checked + .gpgpl-acc-switch-ui::after {
	transform: translateX(18px);
}

.gpgpl-acc-switch input:focus-visible + .gpgpl-acc-switch-ui {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-acc-switch strong,
.gpgpl-acc-cal strong {
	display: block;
	font-size: 0.9rem;
}

.gpgpl-acc-switch small,
.gpgpl-acc-cal small {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-acc-cal {
	padding: 0.8rem 0.85rem;
	border-radius: 14px;
	background: var(--gpgpl-paper);
}

.gpgpl-acc-cal.is-locked {
	background: #FFF6E6;
}

.gpgpl-acc-small {
	margin: 0.6rem 0 0;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-acc-small a {
	color: var(--gpgpl-leaf-dark);
	font-weight: 700;
}

.gpgpl-acc-hero {
	margin: 0.25rem 0 0.9rem;
	padding: 1rem;
	border-radius: 16px;
	background: linear-gradient(135deg, #33291F, #38522A);
	color: #FCF9F3;
}

.gpgpl-designs-panel .gpgpl-acc-hero h4 {
	margin: 0.5rem 0 0.3rem;
	color: #FCF9F3;
}

.gpgpl-acc-hero p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.86);
}

.gpgpl-acc-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: rgba(156, 175, 123, 0.18);
	color: #9CAF7B;
}

.gpgpl-acc-hero-icon svg {
	width: 20px;
	height: 20px;
}

.gpgpl-acc-perks {
	margin: 0 0 0.3rem;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
}

.gpgpl-acc-perks li {
	position: relative;
	margin: 0 0 0.4rem;
	padding-left: 1.4rem;
}

.gpgpl-acc-perks li::before {
	content: '✓';
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--gpgpl-leaf);
}

.gpgpl-export-note strong {
	color: var(--gpgpl-ink);
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-spin {
		animation: none;
	}
}

.gpgpl-designs-panel .gpgpl-panel-body > .gpgpl-acc-section {
	padding-top: 0;
	border-top: none;
	background: transparent;
}

.gpgpl-designs-panel .gpgpl-panel-body > .gpgpl-acc-section:first-child {
	padding-top: 0.25rem;
}

/* =====================================================================
   Help me pick the right plants (plant finder panel)
   ===================================================================== */

.gpgpl-finder-panel .gpgpl-panel-body {
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
}

.gpgpl-add-menu-finder svg {
	color: var(--gpgpl-gold);
}

.gpgpl-find-intro {
	margin: 0 0 0.9rem;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-progress {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 0 1rem;
}

.gpgpl-find-progress-bar {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: #E2E8D3;
	overflow: hidden;
}

.gpgpl-find-progress-bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--gpgpl-leaf);
	transition: width 0.35s var(--gpgpl-ease);
}

.gpgpl-find-progress-label {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
}

.gpgpl-finder-panel .gpgpl-find-title {
	margin: 0 0 0.3rem;
	font-family: var(--gpgpl-font-display);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gpgpl-ink);
}

.gpgpl-find-hint {
	margin: 0 0 1rem;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-options {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: 0.55rem;
}

.gpgpl-find-option {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-height: 88px;
	padding: 0.7rem 0.5rem;
	border: 2px solid var(--gpgpl-border);
	border-radius: 16px;
	background: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.gpgpl-find-option:hover {
	border-color: #CBD5B6;
}

.gpgpl-find-option:active {
	transform: scale(0.97);
}

.gpgpl-find-option[aria-checked="true"] {
	border-color: var(--gpgpl-leaf);
	background: var(--gpgpl-paper);
}

.gpgpl-find-option-icon {
	font-size: 1.6rem;
	line-height: 1;
}

.gpgpl-find-size {
	margin-bottom: 1rem;
}

.gpgpl-find-size-label {
	margin: 0 0 0.45rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-pills,
.gpgpl-find-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

.gpgpl-find-pill,
.gpgpl-find-swatch {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.4rem 0.85rem;
	border: 2px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-find-pill[aria-checked="true"],
.gpgpl-find-swatch[aria-checked="true"] {
	border-color: var(--gpgpl-leaf);
	background: var(--gpgpl-paper);
}

.gpgpl-find-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(51, 41, 31, 0.2);
}

.gpgpl-find-swatch.is-any .gpgpl-find-dot {
	background: conic-gradient(#e8a0bf, #f4c430, #4472c4, #7b4fa0, #d1382c, #e8a0bf);
}

.gpgpl-find-note,
.gpgpl-find-small {
	margin: 0.2rem 0 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 1.25rem 0 0.5rem;
}

.gpgpl-finder-panel .gpgpl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0.5rem 1rem;
	text-decoration: none;
}

.gpgpl-find-nav .gpgpl-btn-primary {
	min-width: 140px;
}

.gpgpl-find-link {
	padding: 0;
	border: none;
	background: none;
	font-family: var(--gpgpl-font-ui);
	font-size: inherit;
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.gpgpl-find-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	padding: 3rem 1rem;
	font-size: 0.9rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-spinner {
	width: 30px;
	height: 30px;
	border: 3px solid #E2E8D3;
	border-top-color: var(--gpgpl-leaf);
	border-radius: 50%;
	animation: gpgpl-spin 0.8s linear infinite;
}

.gpgpl-find-results-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.gpgpl-find-total {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
}

.gpgpl-find-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.5rem 0 0.75rem;
}

.gpgpl-find-chips span {
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--gpgpl-paper);
	font-size: 0.76rem;
	font-weight: 600;
}

.gpgpl-find-notice {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 12px;
	background: #FFF6E6;
	font-size: 0.82rem;
	line-height: 1.45;
}

.gpgpl-find-notice.is-limit {
	background: var(--gpgpl-paper);
}

.gpgpl-find-list {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 0.9rem;
	padding: 0;
	list-style: none;
}

.gpgpl-find-card {
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0.65rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 16px;
	background: #FCF9F3;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.gpgpl-find-card.is-on-bed {
	border-color: #CBD5B6;
}

.gpgpl-find-card.is-just-added {
	box-shadow: 0 0 0 3px rgba(74, 106, 52, 0.22);
}

.gpgpl-find-thumb {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 12px;
	overflow: hidden;
}

.gpgpl-find-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpgpl-find-thumb-dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	opacity: 0.85;
}

.gpgpl-find-card-body {
	flex: 1;
	min-width: 0;
}

.gpgpl-find-name {
	display: block;
	font-size: 0.92rem;
	font-style: italic;
	line-height: 1.3;
}

.gpgpl-find-common {
	display: block;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-excerpt {
	margin: 0.3rem 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0.4rem 0 0;
	padding: 0;
	list-style: none;
}

.gpgpl-find-badges li {
	margin: 0;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--gpgpl-paper);
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-find-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.75rem;
	margin-top: 0.55rem;
	font-size: 0.8rem;
}

.gpgpl-finder-panel .gpgpl-find-add {
	min-height: 36px;
	padding: 0.35rem 0.85rem;
}

.gpgpl-find-count {
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-find-more {
	width: 100%;
}

.gpgpl-find-empty {
	padding: 1.5rem 0.5rem;
	text-align: center;
	font-size: 0.88rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-find-empty-icon {
	font-size: 2rem;
}

.gpgpl-find-option:focus-visible,
.gpgpl-find-pill:focus-visible,
.gpgpl-find-swatch:focus-visible,
.gpgpl-find-link:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-find-spinner {
		animation-duration: 2s;
	}
}

/* =====================================================================
   Feet / metres switch beside the design chip
   ===================================================================== */

.gpgpl-design-area .gpgpl-view-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
	pointer-events: none;
}

.gpgpl-design-area .gpgpl-view-row > * {
	pointer-events: auto;
}

.gpgpl-units-switch {
	display: inline-flex;
	flex: 0 0 auto;
	padding: 0.2rem;
	border-radius: 13px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
}

.gpgpl-units-switch .gpgpl-unit-btn {
	min-width: 38px;
	min-height: 34px;
	padding: 0 0.6rem;
	border: none;
	border-radius: 10px;
	background: transparent;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease;
}

.gpgpl-units-switch .gpgpl-unit-btn.is-active {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-units-switch .gpgpl-unit-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-design-area.is-shape-editing .gpgpl-units-switch {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media (max-width: 380px) {
	.gpgpl-design-chip {
		max-width: 44vw;
	}
}


/* ==========================================================================
   Garden features: paths, walls, patios and gravel areas
   (garden-planner-hardscape.js)
   ========================================================================== */

/* Ground layer: inside the plan, under the plants */
.gpgpl-features-layer {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
}

.gpgpl-feature-edge {
	fill: none;
	stroke: rgba(46, 38, 26, 0.55);
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.gpgpl-feature-line + .gpgpl-feature-hit,
.gpgpl-feature-hit {
	fill: none;
	stroke: transparent;
}

.gpgpl-feature-grab {
	pointer-events: auto;
	cursor: move;
	touch-action: none;
}

.gpgpl-feature-hit.gpgpl-feature-grab {
	pointer-events: stroke;
}

.gpgpl-feature.is-selected .gpgpl-feature-edge {
	stroke: var(--gpgpl-gold);
	stroke-width: 3;
}

.gpgpl-feature-line.gpgpl-feature-grab,
.gpgpl-feature-body.gpgpl-feature-grab {
	pointer-events: visiblePainted;
}

.gpgpl-feature.is-draft {
	opacity: 0.85;
}

.gpgpl-feature.is-draft .gpgpl-feature-edge {
	stroke: var(--gpgpl-leaf-dark);
	stroke-dasharray: 6 4;
}

/* Handles: above the plants */
.gpgpl-feature-handles {
	position: absolute;
	top: 0;
	left: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.gpgpl-feature-handle {
	fill: #FCF9F3;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 3;
	pointer-events: auto;
	touch-action: none;
	cursor: grab;
	filter: drop-shadow(0 1px 3px rgba(51, 41, 31, 0.4));
}

/* A finger-sized touch area round each corner (invisible) */
.gpgpl-corner-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
	touch-action: none;
	cursor: grab;
}

.gpgpl-feature-handle.is-selected {
	fill: var(--gpgpl-gold);
	stroke: var(--gpgpl-ink);
}

.gpgpl-feature-handle.is-closer {
	fill: var(--gpgpl-leaf);
	stroke: #FCF9F3;
}

.gpgpl-feature-mid {
	fill: rgba(255, 255, 255, 0.85);
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 1.5;
	pointer-events: auto;
	touch-action: none;
	cursor: copy;
}

.gpgpl-draw-catcher {
	fill: transparent;
	pointer-events: all;
	cursor: crosshair;
	touch-action: none;
}

.gpgpl-draw-rubber {
	fill: none;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 1.5;
	stroke-dasharray: 5 4;
	pointer-events: none;
}

/* While drawing, plants step back so taps land on the plan */
.gpgpl-design-area.is-feature-drawing .gpgpl-plant-token {
	opacity: 0.55;
	pointer-events: none;
}

.gpgpl-design-area.is-feature-drawing .gpgpl-dock,
.gpgpl-design-area.is-feature-drawing .gpgpl-top-actions,
.gpgpl-design-area.is-feature-drawing .gpgpl-hint,
.gpgpl-design-area.is-feature-drawing .gpgpl-design-chip,
.gpgpl-design-area.is-feature-drawing .gpgpl-units-switch {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.gpgpl-feature-toolbar .gpgpl-shape-actions {
	justify-content: flex-end;
}

.gpgpl-feature-toolbar .gpgpl-feature-undo-point {
	margin-right: auto;
}

/* The "Add to your garden" pop-up */
.gpgpl-pop-build {
	display: block;
}

.gpgpl-pop-build .gpgpl-pop-label {
	display: block;
	margin-bottom: 0.55rem;
}

.gpgpl-build-tools {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.45rem;
}

.gpgpl-build-tool {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 74px;
	padding: 0.5rem 0.25rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.15;
	text-align: center;
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, border-color var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-build-tool:hover {
	background: var(--gpgpl-paper);
	border-color: var(--gpgpl-leaf);
}

.gpgpl-build-tool:active {
	transform: scale(0.96);
}

.gpgpl-build-tool svg {
	color: var(--gpgpl-ink-soft);
}

/* Selected feature card */
.gpgpl-feature-swatch {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: var(--gpgpl-radius-s);
	border: 1px solid var(--gpgpl-border);
	background-size: 64px 64px;
}

.gpgpl-feature-detail {
	margin: 0.35rem 0 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-feature-materials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.65rem;
}

.gpgpl-material-btn {
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid #FCF9F3;
	border-radius: 10px;
	background-size: 76px 76px;
	box-shadow: 0 0 0 1px var(--gpgpl-border);
	cursor: pointer;
	transition: box-shadow var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-material-btn:active {
	transform: scale(0.94);
}

.gpgpl-material-btn.is-active {
	box-shadow: 0 0 0 2px var(--gpgpl-leaf-dark);
}

.gpgpl-feature-size[hidden] {
	display: none;
}

.gpgpl-feature-size {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.65rem;
}

.gpgpl-feature-size-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-feature-size-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.gpgpl-size-chip {
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.gpgpl-size-chip.is-active {
	background: var(--gpgpl-leaf-dark);
	border-color: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-feature-actions {
	display: flex;
	gap: 0.45rem;
	margin-top: 0.7rem;
}

.gpgpl-feature-actions .gpgpl-btn {
	flex: 1;
}

.gpgpl-feature-actions .gpgpl-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.gpgpl-feature-delete {
	color: var(--gpgpl-clay);
	border-color: rgba(232, 96, 74, 0.35);
}

.gpgpl-feature-tip {
	margin: 0.55rem 0 0;
	font-size: 0.74rem;
	color: var(--gpgpl-ink-soft);
}

/* A plant card and a feature card never show together; the feature card
   steps aside while drawing. In 3D it works too, without the corner
   tools (those need the plan). */
.gpgpl-design-area.is-feature-drawing .gpgpl-feature-panel {
	display: none;
}

.gpgpl-design-area.is-view-3d .gpgpl-feature-add-point,
.gpgpl-design-area.is-view-3d .gpgpl-feature-remove-point,
.gpgpl-design-area.is-view-3d .gpgpl-feature-point-curve,
.gpgpl-design-area.is-view-3d .gpgpl-feature-rect,
.gpgpl-design-area.is-view-3d .gpgpl-feature-tip {
	display: none !important;
}

/* "My design" list */
.gpgpl-features-section {
	margin-top: 1.4rem;
}

.gpgpl-features-empty {
	font-size: 0.85rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-features-empty[hidden] {
	display: none;
}

.gpgpl-features-summary {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.gpgpl-feature-row {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: var(--gpgpl-radius-s);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.86rem;
	text-align: left;
	cursor: pointer;
}

.gpgpl-feature-row:hover {
	border-color: var(--gpgpl-leaf);
}

.gpgpl-feature-row-swatch {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background-size: 60px 60px;
}

.gpgpl-feature-row-text {
	flex: 1;
	min-width: 0;
}

.gpgpl-feature-row-text span {
	color: var(--gpgpl-ink-soft);
}

.gpgpl-feature-row-qty {
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 380px) {
	.gpgpl-build-tool {
		min-height: 64px;
		font-size: 0.74rem;
	}
}

/* Portrait phones: a compact feature card, so the plan stays in view */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-feature-panel {
		padding: 0.55rem 0.7rem;
	}

	.gpgpl-feature-panel .gpgpl-feature-swatch {
		width: 32px;
		height: 32px;
	}

	.gpgpl-feature-panel .gpgpl-feature-tip {
		display: none;
	}

	.gpgpl-feature-panel .gpgpl-feature-detail {
		margin-top: 0.2rem;
		font-size: 0.76rem;
	}

	.gpgpl-feature-panel .gpgpl-feature-materials {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin-top: 0.45rem;
		padding: 2px;
	}

	.gpgpl-feature-panel .gpgpl-material-btn {
		flex: none;
		width: 34px;
		height: 34px;
	}

	.gpgpl-feature-panel .gpgpl-feature-size,
	.gpgpl-feature-panel .gpgpl-feature-actions {
		margin-top: 0.45rem;
	}

	.gpgpl-feature-panel .gpgpl-size-chip {
		padding: 0.28rem 0.5rem;
	}

	.gpgpl-feature-panel .gpgpl-feature-actions .gpgpl-btn {
		padding: 0.4rem 0.6rem;
	}
}

/* ---------- Brown "garden features" button under + ---------- */
.gpgpl-build-wrap {
	position: relative;
}

.gpgpl-build-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--gpgpl-ctl) + 6px);
	height: calc(var(--gpgpl-ctl) + 6px);
	padding: 0;
	border: none;
	border-radius: 16px;
	background: #8A5A3B;
	color: #FCF9F3;
	box-shadow: 0 8px 22px rgba(110, 66, 36, 0.35);
	cursor: pointer;
	transition: transform var(--gpgpl-dur) var(--gpgpl-ease), background var(--gpgpl-dur) ease;
}

.gpgpl-build-btn:hover {
	background: #7A4E32;
}

.gpgpl-build-btn:active {
	transform: scale(0.95);
}

.gpgpl-build-btn[aria-expanded="true"] {
	background: #5E3B25;
}

.gpgpl-build-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-build-menu .gpgpl-add-menu-item svg {
	color: #8A5A3B;
}

.gpgpl-add-menu-sep {
	height: 1px;
	margin: 0.3rem 0.5rem;
	background: var(--gpgpl-border);
}

.gpgpl-build-lock-all[aria-checked="true"] {
	background: #F5EDE6;
}

.gpgpl-build-lock-all[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.gpgpl-design-area.is-shape-editing .gpgpl-build-btn {
	visibility: hidden;
}

/* ---------- Extra planting beds ---------- */
.gpgpl-feature-edge.gpgpl-bed-edge {
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2.5;
}

.gpgpl-feature-bed.is-selected .gpgpl-feature-edge {
	stroke: var(--gpgpl-gold);
	stroke-width: 3;
}

.gpgpl-feature-smooth {
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-feature-panel .gpgpl-feature-smooth {
	display: inline-flex; /* beds, patios, gravel, paths and walls can all curve */
}

.gpgpl-feature-smooth input {
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-feature-materials:empty {
	display: none;
}

.gpgpl-feature-row-swatch.is-bed {
	background-color: #EFE6D6 !important;
	box-shadow: inset 0 0 0 2px var(--gpgpl-leaf-dark);
}

/* ---------- Locking ---------- */
.gpgpl-feature-lock svg {
	vertical-align: -2px;
	margin-right: 0.2rem;
}

.gpgpl-feature-lock[aria-pressed="true"] {
	background: #F5EDE6;
	border-color: #8A5A3B;
	color: #5E3B25;
}

.gpgpl-feature-lock[aria-pressed="false"] .gpgpl-lock-shackle {
	transform: translate(3px, -1px) rotate(12deg);
	transform-origin: 15.5px 10px;
}

.gpgpl-feature-panel.is-locked .gpgpl-feature-materials,
.gpgpl-feature-panel.is-locked .gpgpl-feature-size,
.gpgpl-feature-panel.is-locked .gpgpl-feature-smooth {
	opacity: 0.5;
	pointer-events: none;
}

.gpgpl-feature-row-lock {
	display: inline-block;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: #F5EDE6;
	color: #5E3B25;
	font-size: 0.7rem;
	font-weight: 700;
	vertical-align: 1px;
}

/* ---------- Measurements ---------- */
.gpgpl-feature-dim {
	font-family: var(--gpgpl-font-ui);
	font-size: 11px;
	font-weight: 700;
	fill: var(--gpgpl-ink);
	stroke: #FCF9F3;
	stroke-width: 3.5px;
	stroke-linejoin: round;
	paint-order: stroke;
	pointer-events: none;
}

.gpgpl-feature-row-qty {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	line-height: 1.25;
}

.gpgpl-feature-row-qty span + span {
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	font-size: 0.8rem;
}

.gpgpl-feature-actions {
	flex-wrap: wrap;
}

.gpgpl-bed-actions .gpgpl-btn[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

.gpgpl-clear-design-btn {
	color: var(--gpgpl-clay);
	border-color: rgba(232, 96, 74, 0.35);
}

/* ---------- Garden outline: lawn inside, pale outside ---------- */
.gpgpl-garden-lawn {
	fill: rgba(74, 106, 52, 0.34);
	pointer-events: none;
}

.gpgpl-shape-mask-path {
	fill: rgba(226, 214, 194, 0.92);
}

.gpgpl-shape-outline.is-committed {
	stroke: #33291F;
	stroke-width: 2;
}

.gpgpl-pop-title {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-pop-note {
	margin: 0;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-feature-shape-actions .gpgpl-btn[hidden] {
	display: none;
}

.gpgpl-feature-panel.is-locked .gpgpl-feature-shape-actions {
	opacity: 0.5;
	pointer-events: none;
}

/* ---------- Compact feature card: one row of tools ---------- */
.gpgpl-feature-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
}

.gpgpl-tool-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex: none;
	min-height: 34px;
	margin: 0;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-tool-chip[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.gpgpl-tool-chip[hidden] {
	display: none;
}

.gpgpl-feature-panel .gpgpl-feature-smooth.gpgpl-tool-chip {
	margin-top: 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink);
	text-transform: none;
	letter-spacing: 0;
}

.gpgpl-feature-smooth.gpgpl-tool-chip input {
	width: 15px;
	height: 15px;
	margin: 0;
}

.gpgpl-tool-chip.gpgpl-feature-delete {
	color: var(--gpgpl-clay);
	border-color: rgba(232, 96, 74, 0.35);
}

.gpgpl-feature-panel.is-locked .gpgpl-feature-smooth {
	opacity: 0.45;
	pointer-events: none;
}

/* Phones held upright: the card is one short strip above the dock, and
   the tools scroll sideways rather than stacking up. */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-feature-panel .gpgpl-feature-tools {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: 0.45rem -0.7rem 0;
		padding: 0 0.7rem 2px;
		scrollbar-width: none;
	}

	.gpgpl-feature-panel .gpgpl-feature-tools::-webkit-scrollbar {
		display: none;
	}

	.gpgpl-feature-panel .gpgpl-selected-panel-header .gpgpl-feature-swatch {
		width: 28px;
		height: 28px;
	}

	.gpgpl-feature-panel .gpgpl-feature-name {
		font-size: 0.95rem;
	}

	.gpgpl-feature-panel .gpgpl-feature-detail {
		display: none; /* the title line already carries the sizes */
	}

	.gpgpl-feature-panel .gpgpl-material-btn {
		width: 30px;
		height: 30px;
		border-radius: 8px;
	}

	.gpgpl-feature-panel .gpgpl-feature-size {
		margin-top: 0.4rem;
	}
}

/* ---------- Add to Home Screen (beside full screen) ---------- */
.gpgpl-top-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gpgpl-design-area .gpgpl-install-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gpgpl-ctl);
	height: var(--gpgpl-ctl);
	padding: 0;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	color: var(--gpgpl-ink);
	box-shadow: var(--gpgpl-float-shadow);
	cursor: pointer;
}

.gpgpl-design-area .gpgpl-install-btn[hidden] {
	display: none;
}

.gpgpl-install-btn[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-install-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-install-tip[hidden] {
	display: none;
}

.gpgpl-install-tip {
	position: absolute;
	z-index: 32;
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 0.6rem);
	right: var(--gpgpl-pad-r);
	width: min(330px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	padding: 1rem 1.1rem 0.9rem;
	border-radius: 18px;
	background: #FCF9F3;
	box-shadow: 0 18px 44px rgba(51, 41, 31, 0.28);
	animation: gpgpl-card-in var(--gpgpl-dur) var(--gpgpl-ease);
}

.gpgpl-install-tip-close {
	position: absolute;
	top: 0.4rem;
	right: 0.5rem;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.gpgpl-install-tip-title {
	margin: 0 1.8rem 0.2rem 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-install-tip-sub {
	margin: 0 0 0.5rem;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-install-steps {
	margin: 0.3rem 0 0.6rem;
	padding-left: 1.3rem;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--gpgpl-ink);
}

.gpgpl-install-steps li + li {
	margin-top: 0.3rem;
}

.gpgpl-install-ico {
	display: inline-flex;
	vertical-align: -4px;
	padding: 1px 3px;
	border-radius: 6px;
	background: var(--gpgpl-paper);
	color: #0A7AFF;
}

/* Opened from the home screen: it's already an app, so no need for the
   install button (it hides itself) */
.gpgpl-design-area.is-app .gpgpl-install-btn {
	display: none;
}


/* ==========================================================================
   Side buttons: add plants, add beds/paths/patios, garden size & shape.
   Right-hand edge, halfway down, the same in plan and 3D — within thumb
   reach on a big phone. The plan fits to their left (updatePlanReserves).
   ========================================================================== */
.gpgpl-side-actions {
	--gpgpl-side: clamp(48px, 13vw, 60px);
	position: absolute;
	z-index: 21;
	right: var(--gpgpl-pad-r);
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(0.5rem, 2.2vh, 1rem);
	transition: opacity var(--gpgpl-dur) ease;
}

/* Between the top bar and the dock, whatever the screen */
@media (max-height: 520px) {
	.gpgpl-side-actions {
		--gpgpl-side: 44px;
		top: calc(50% + 0.75rem);
		gap: 0.45rem;
	}
}

.gpgpl-side-actions .gpgpl-add-btn,
.gpgpl-side-actions .gpgpl-build-btn,
.gpgpl-side-actions .gpgpl-garden-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gpgpl-side);
	height: var(--gpgpl-side);
	padding: 0;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	box-shadow: 0 8px 22px rgba(74, 106, 52, 0.32);
	cursor: pointer;
	transform: none;
	transition: background var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-side-actions .gpgpl-add-btn svg,
.gpgpl-side-actions .gpgpl-build-btn svg,
.gpgpl-side-actions .gpgpl-garden-btn svg {
	width: 58%;
	height: 58%;
}

.gpgpl-side-actions .gpgpl-add-btn:hover,
.gpgpl-side-actions .gpgpl-build-btn:hover,
.gpgpl-side-actions .gpgpl-garden-btn:hover {
	background: #4A6A34;
}

.gpgpl-side-actions .gpgpl-add-btn:active,
.gpgpl-side-actions .gpgpl-build-btn:active,
.gpgpl-side-actions .gpgpl-garden-btn:active {
	transform: scale(0.95);
}

/* Open: darker, no spin */
.gpgpl-side-actions .gpgpl-add-btn[aria-expanded="true"],
.gpgpl-side-actions .gpgpl-build-btn[aria-expanded="true"],
.gpgpl-side-actions .gpgpl-garden-btn[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
	transform: none;
}

.gpgpl-garden-btn .gpgpl-node {
	fill: var(--gpgpl-leaf);
	transition: fill var(--gpgpl-dur) ease;
}

.gpgpl-garden-btn[aria-expanded="true"] .gpgpl-node {
	fill: var(--gpgpl-leaf-dark);
}

.gpgpl-garden-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* Their menus open to the left, level with the button */
.gpgpl-side-actions .gpgpl-add-menu {
	top: 50%;
	right: calc(100% + 0.6rem);
	bottom: auto;
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem); /* iPhone: the height actually showing */
	overflow-y: auto;
	overscroll-behavior: contain;
	transform-origin: center right;
	transform: translateY(-50%) scale(0.92) translateX(6px);
}

.gpgpl-side-actions .gpgpl-add-menu.is-open {
	transform: translateY(-50%);
}

/* Out of the way while drawing, editing the garden's outline or
   when full screen fades its controls */
.gpgpl-design-area.is-feature-drawing .gpgpl-side-actions,
.gpgpl-design-area.is-shape-editing .gpgpl-side-actions,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-side-actions {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* "Front of garden" stays centred under the plan */
.gpgpl-design-area .gpgpl-front-label {
	left: var(--gpgpl-front-label-left, 50%);
}

/* The "+" on the add-plants and add-features buttons: its own mark, set
   in the button's top-left corner (clear of the edge), scaling with it */
.gpgpl-side-actions .gpgpl-add-btn,
.gpgpl-side-actions .gpgpl-build-btn {
	position: relative;
	--gpgpl-plus: calc(var(--gpgpl-side) * 0.2);
	--gpgpl-plus-inset: calc(var(--gpgpl-side) * 0.13);
	--gpgpl-plus-bar: max(2px, calc(var(--gpgpl-side) * 0.045));
}

.gpgpl-side-actions .gpgpl-add-btn::before,
.gpgpl-side-actions .gpgpl-add-btn::after,
.gpgpl-side-actions .gpgpl-build-btn::before,
.gpgpl-side-actions .gpgpl-build-btn::after {
	content: "";
	position: absolute;
	border-radius: 2px;
	background: currentColor;
	pointer-events: none;
}

.gpgpl-side-actions .gpgpl-add-btn::before,
.gpgpl-side-actions .gpgpl-build-btn::before {
	top: calc(var(--gpgpl-plus-inset) + (var(--gpgpl-plus) - var(--gpgpl-plus-bar)) / 2);
	left: var(--gpgpl-plus-inset);
	width: var(--gpgpl-plus);
	height: var(--gpgpl-plus-bar);
}

.gpgpl-side-actions .gpgpl-add-btn::after,
.gpgpl-side-actions .gpgpl-build-btn::after {
	top: var(--gpgpl-plus-inset);
	left: calc(var(--gpgpl-plus-inset) + (var(--gpgpl-plus) - var(--gpgpl-plus-bar)) / 2);
	width: var(--gpgpl-plus-bar);
	height: var(--gpgpl-plus);
}

/* Icons sit a touch lower and right, leaving the corner to the "+" */
.gpgpl-side-actions .gpgpl-add-btn svg,
.gpgpl-side-actions .gpgpl-build-btn svg {
	transform: translate(6%, 6%);
}

/* ==========================================================================
   Walk-through (garden-planner-walk.js): a route drawn on the plan, walked
   in 3D at eye height.
   ========================================================================== */

/* The side button: the same rounded square as the others */
.gpgpl-walk-wrap {
	position: relative;
}

.gpgpl-side-actions .gpgpl-walk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--gpgpl-side);
	height: var(--gpgpl-side);
	padding: 0;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	box-shadow: 0 8px 22px rgba(74, 106, 52, 0.32);
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-side-actions .gpgpl-walk-btn svg {
	width: 58%;
	height: 58%;
}

.gpgpl-side-actions .gpgpl-walk-btn:hover {
	background: #4A6A34;
}

.gpgpl-side-actions .gpgpl-walk-btn:active {
	transform: scale(0.95);
}

.gpgpl-side-actions .gpgpl-walk-btn[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
}

.gpgpl-walk-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-walk-menu .gpgpl-add-menu-item:disabled {
	opacity: 0.45;
	cursor: default;
}

.gpgpl-walk-menu .gpgpl-add-menu-item:disabled:hover {
	background: transparent;
}

.gpgpl-walk-menu .gpgpl-walk-menu-delete svg {
	color: #B4493B;
}

/* ---- The route on the plan ---- */

.gpgpl-walk-layer {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	overflow: visible;
	pointer-events: none;
}

.gpgpl-walk-catcher {
	fill: transparent;
	pointer-events: all;
	cursor: crosshair;
	touch-action: none;
}

.gpgpl-walk-case {
	fill: none;
	stroke: rgba(255, 255, 255, 0.9);
	stroke-width: 6.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.gpgpl-walk-line {
	fill: none;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2.6;
	stroke-dasharray: 7 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.gpgpl-walk-arrow {
	fill: none;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	paint-order: stroke;
	pointer-events: none;
}

.gpgpl-walk-start,
.gpgpl-walk-end {
	fill: #FCF9F3;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 2.5;
	pointer-events: none;
}

/* ▶ at the start of the route */
.gpgpl-walk-pin {
	position: absolute;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0 0 0 3px;
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	box-shadow: 0 4px 14px rgba(51, 41, 31, 0.35);
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-walk-pin[hidden] {
	display: none;
}

.gpgpl-walk-pin svg {
	width: 18px;
	height: 18px;
}

.gpgpl-walk-pin:hover {
	background: #4A6A34;
}

.gpgpl-walk-pin:active {
	transform: translate(-50%, -50%) scale(0.92);
}

.gpgpl-walk-pin:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* Viewpoints: markers on the plan to look round from in 3D */
.gpgpl-view-pins {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 4;
}

.gpgpl-view-pins[hidden],
.gpgpl-design-area.is-shape-editing .gpgpl-view-pins,
.gpgpl-design-area.is-feature-drawing:not(.is-view-placing) .gpgpl-view-pins {
	display: none;
}

.gpgpl-design-area.is-view-placing .gpgpl-view-pins {
	pointer-events: none;
	opacity: 0.6;
}

.gpgpl-view-pin {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: #2F6F8F;
	color: #FCF9F3;
	box-shadow: 0 4px 14px rgba(51, 41, 31, 0.35);
	transform: translate(-50%, -50%);
	cursor: pointer;
	touch-action: none;
	transition: background var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-view-pin svg {
	position: relative;
	width: 18px;
	height: 18px;
}

.gpgpl-view-pin:hover {
	background: #255C77;
}

.gpgpl-view-pin:active,
.gpgpl-view-pin.is-dragging {
	transform: translate(-50%, -50%) scale(1.12);
	cursor: grabbing;
}

.gpgpl-view-pin:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* Which way it faces: a soft wedge behind the marker */
.gpgpl-view-cone {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	transform-origin: 0 0;
}

.gpgpl-view-cone::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 4px;
	width: 52px;
	height: 46px;
	background: radial-gradient(ellipse at 50% 0, rgba(47, 111, 143, 0.45), rgba(47, 111, 143, 0) 70%);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.gpgpl-view-num {
	position: absolute;
	right: -7px;
	top: -7px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 8px;
	background: #FCF9F3;
	color: #2F6F8F;
	font: 700 10px/16px var(--gpgpl-font-ui);
	text-align: center;
}

.gpgpl-view-num:empty {
	display: none;
}

.gpgpl-walk-bar [hidden] {
	display: none !important;
}

.gpgpl-walk-bar .gpgpl-view-label {
	flex: 1;
	padding-left: 0.6rem;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.95rem;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-walk-bar.is-view {
	width: auto;
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r));
}

/* Out of the way while drawing a feature or editing the outline */
.gpgpl-design-area.is-feature-drawing:not(.is-walk-drawing) .gpgpl-walk-pin,
.gpgpl-design-area.is-shape-editing .gpgpl-walk-pin,
.gpgpl-design-area.is-shape-editing .gpgpl-walk-layer {
	display: none;
}

.gpgpl-design-area.is-feature-drawing:not(.is-walk-drawing) .gpgpl-walk-layer {
	opacity: 0.35;
}

/* Drawing a route: features step back too, so every tap lands on the plan */
.gpgpl-design-area.is-walk-drawing .gpgpl-features-layer {
	opacity: 0.8;
}

.gpgpl-walk-toolbar .gpgpl-walk-undo {
	margin-right: auto;
}

/* ---- Walking in 3D ---- */

.gpgpl-design-area.is-walking .gpgpl-dock,
.gpgpl-design-area.is-walking .gpgpl-side-actions,
.gpgpl-design-area.is-walking .gpgpl-3d-help,
.gpgpl-design-area.is-walking .gpgpl-3d-labels,
.gpgpl-design-area.is-walking .gpgpl-selected-panel {
	display: none !important;
}

.gpgpl-walk-bar {
	position: absolute;
	left: 50%;
	bottom: var(--gpgpl-pad-b);
	z-index: 22;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: min(560px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	padding: 0.4rem;
	border-radius: 20px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	transform: translateX(-50%);
	transition: opacity var(--gpgpl-dur) ease, transform var(--gpgpl-dur) ease;
	animation: gpgpl-fade-in var(--gpgpl-dur) ease;
}

.gpgpl-walk-bar[hidden] {
	display: none;
}

.gpgpl-walk-bar .gpgpl-dock-btn {
	box-shadow: none;
	background: transparent;
}

.gpgpl-walk-bar .gpgpl-walk-toggle {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-walk-bar .gpgpl-walk-toggle:hover {
	background: #4A6A34;
}

.gpgpl-walk-bar .gpgpl-walk-speed {
	width: auto;
	min-width: var(--gpgpl-ctl);
	padding: 0 0.5rem;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.95rem;
	font-weight: 700;
}

.gpgpl-walk-bar .gpgpl-dock-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-walk-progress {
	flex: 1 1 auto;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
	height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	touch-action: none;
	--gpgpl-walk-pct: 0%;
}

.gpgpl-walk-progress:focus {
	outline: none;
}

.gpgpl-walk-progress::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(to right, var(--gpgpl-leaf) 0, var(--gpgpl-leaf) var(--gpgpl-walk-pct), #E2D6C2 var(--gpgpl-walk-pct), #E2D6C2 100%);
}

.gpgpl-walk-progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8px;
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-leaf-dark);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gpgpl-walk-progress:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px var(--gpgpl-gold), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.gpgpl-walk-progress::-moz-range-track {
	height: 6px;
	border-radius: 999px;
	background: #E2D6C2;
}

.gpgpl-walk-progress::-moz-range-progress {
	height: 6px;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
}

.gpgpl-walk-progress::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-leaf-dark);
	box-sizing: border-box;
}

/* "Drag to look around", briefly, as the walk starts */
.gpgpl-walk-tip {
	display: none;
	position: absolute;
	left: 50%;
	top: 38%;
	z-index: 5;
	margin: 0;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background: rgba(51, 41, 31, 0.72);
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	transform: translateX(-50%);
	pointer-events: none;
	opacity: 0;
}

.gpgpl-design-area.is-walking .gpgpl-walk-tip {
	display: block;
	animation: gpgpl-walk-tip 3.6s ease 0.4s both;
}

@keyframes gpgpl-walk-tip {
	0% { opacity: 0; }
	12% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 0; }
}

/* Full screen: the bar fades with the other controls */
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-walk-bar {
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-design-area.is-walking .gpgpl-walk-tip {
		animation-duration: 0.01s;
		animation-delay: 0s;
		opacity: 0;
	}
}

/* A menu item that isn't offered right now (e.g. "Delete the walk route") */
.gpgpl-add-menu-item[hidden] {
	display: none;
}

/* ==========================================================================
   1.7: raised beds, plan zoom, plant numbers, "Done" buttons
   ========================================================================== */

/* ---- "Done" on the plant and feature cards, and the garden pop-up ---- */
.gpgpl-info-close.gpgpl-card-done {
	flex: none;
	width: auto;
	height: 34px;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.88rem;
	font-weight: 700;
	line-height: 34px;
	box-shadow: 0 2px 8px rgba(74, 106, 52, 0.25);
	transition: background var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-info-close.gpgpl-card-done:hover {
	background: #4A6A34;
	color: #FCF9F3;
}

.gpgpl-info-close.gpgpl-card-done:active {
	transform: scale(0.96);
}

.gpgpl-info-close.gpgpl-card-done:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-pop-done-row {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.75rem;
}

.gpgpl-pop-done-row .gpgpl-pop-done {
	min-width: 6rem;
	border-radius: 999px;
}

/* ---- Raised beds ---- */
.gpgpl-feature-bed.is-raised .gpgpl-feature-edge.gpgpl-bed-edge {
	stroke: #7A5A3C;          /* timber sides */
	stroke-width: 4.5;
}

.gpgpl-feature-bed.is-raised.is-selected .gpgpl-feature-edge {
	stroke: var(--gpgpl-gold);
}

.gpgpl-feature-size.is-raise {
	flex-wrap: wrap;
	row-gap: 0.4rem;
}

.gpgpl-feature-size.is-raise .gpgpl-feature-size-label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.85rem;
	color: var(--gpgpl-ink);
}

.gpgpl-raise-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	user-select: none;
}

.gpgpl-raise-switch input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gpgpl-raise-track {
	position: relative;
	flex: none;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: #E2D6C2;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-raise-track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #FCF9F3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform var(--gpgpl-dur) ease;
}

.gpgpl-raise-switch input:checked + .gpgpl-raise-track {
	background: var(--gpgpl-leaf);
}

.gpgpl-raise-switch input:checked + .gpgpl-raise-track::after {
	transform: translateX(16px);
}

.gpgpl-raise-switch input:focus-visible + .gpgpl-raise-track {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-raise-custom {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0 0.5rem 0 0.2rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-raise-custom.is-active {
	border-color: var(--gpgpl-leaf-dark);
	box-shadow: 0 0 0 1px var(--gpgpl-leaf-dark);
	color: var(--gpgpl-ink);
}

.gpgpl-raise-input {
	width: 3.1rem;
	padding: 0.28rem 0.2rem 0.28rem 0.45rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	font-family: var(--gpgpl-font-ui);
	font-size: 16px; /* no zoom-on-focus on iPhones */
	font-weight: 700;
	color: var(--gpgpl-ink);
	-moz-appearance: textfield;
}

.gpgpl-raise-input::-webkit-inner-spin-button,
.gpgpl-raise-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gpgpl-raise-input:focus {
	outline: none;
}

/* ---- Zoom buttons (a segmented control in the plan dock) ---- */
.gpgpl-zoom-group {
	display: inline-flex;
	align-items: stretch;
	flex-shrink: 0;
	height: var(--gpgpl-ctl);
	border-radius: 14px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	overflow: hidden;
}

.gpgpl-zoom-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--gpgpl-ctl) - 6px);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--gpgpl-ink);
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, opacity var(--gpgpl-dur) ease;
}

.gpgpl-zoom-btn + .gpgpl-zoom-btn {
	border-left: 1px solid rgba(51, 41, 31, 0.1);
}

.gpgpl-zoom-btn:hover:not(:disabled) {
	background: var(--gpgpl-paper);
}

.gpgpl-zoom-btn:disabled {
	opacity: 0.32;
	cursor: default;
}

.gpgpl-zoom-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: -2px;
}

/* Names or numbers */
.gpgpl-names-btn[aria-pressed="true"] .gpgpl-names-icon-off,
.gpgpl-names-btn[aria-pressed="false"] .gpgpl-names-icon-on {
	display: none;
}

/* ---- The plan, zoomed in ---- */
.gpgpl-design-area.is-plan-zoomed .gpgpl-canvas-scale-wrap {
	max-width: none;
}

.gpgpl-design-area.is-view-plan .gpgpl-canvas-scale-wrap {
	touch-action: none; /* pinches zoom the plan, not the page */
}

.gpgpl-canvas-scale-wrap.is-pinching {
	will-change: transform;
}

.gpgpl-design-area.is-plan-zoomed .gpgpl-front-label {
	display: none;
}

.gpgpl-design-area.is-plan-zoomed .gpgpl-canvas {
	cursor: grab;
}

.gpgpl-design-area.is-plan-panning .gpgpl-canvas {
	cursor: grabbing;
}

/* ---- Plant numbers ---- */
.gpgpl-token-num {
	display: none;
}

.gpgpl-design-area.is-plant-numbers .gpgpl-token-label {
	display: none;
}

.gpgpl-design-area.is-plant-numbers .gpgpl-token-num {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.66rem;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.gpgpl-plant-token.is-key-highlight {
	animation: gpgpl-key-ring 0.9s ease 2;
	z-index: 5;
}

@keyframes gpgpl-key-ring {
	0% { box-shadow: 0 0 0 0 rgba(224, 176, 74, 0.95); border-color: var(--gpgpl-gold); }
	70% { box-shadow: 0 0 0 12px rgba(224, 176, 74, 0); border-color: var(--gpgpl-gold); }
	100% { box-shadow: 0 0 0 0 rgba(224, 176, 74, 0); }
}

/* The key: a scrolling strip just above the dock */
.gpgpl-plant-key {
	position: absolute;
	left: 50%;
	bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 0.55rem);
	z-index: 19;
	display: flex;
	gap: 0.35rem;
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r));
	padding: 0.35rem;
	border-radius: 14px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	transform: translateX(-50%);
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	animation: gpgpl-fade-in var(--gpgpl-dur) ease;
}

.gpgpl-plant-key::-webkit-scrollbar {
	display: none;
}

.gpgpl-plant-key[hidden],
.gpgpl-design-area.is-view-3d .gpgpl-plant-key,
.gpgpl-design-area.is-feature-drawing .gpgpl-plant-key,
.gpgpl-design-area.is-shape-editing .gpgpl-plant-key,
.gpgpl-design-area.has-card .gpgpl-plant-key,
.gpgpl-design-area:has(.gpgpl-feature-panel:not([hidden])) .gpgpl-plant-key,
.gpgpl-design-area:has(.gpgpl-pop.is-open) .gpgpl-plant-key,
.gpgpl-design-area.is-walking .gpgpl-plant-key {
	display: none;
}

.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-plant-key {
	opacity: 0.85;
}

.gpgpl-key-item {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem 0.25rem 0.25rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.78rem;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-key-item:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-key-item:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

.gpgpl-key-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 4px;
	border-radius: 999px;
	color: #FCF9F3;
	font-size: 0.72rem;
	font-weight: 800;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.gpgpl-key-count {
	color: var(--gpgpl-ink-soft);
	font-weight: 700;
}

/* Phones on their side: the key runs down the left, beside the plan */
@media (max-height: 520px) and (orientation: landscape) {
	.gpgpl-plant-key {
		left: var(--gpgpl-pad-l);
		top: var(--gpgpl-key-top, 7rem);
		bottom: auto;
		height: max-content;
		max-height: calc(100% - var(--gpgpl-key-top, 7rem) - var(--gpgpl-pad-b) - var(--gpgpl-ctl) - 0.5rem);
		flex-direction: column;
		align-items: stretch;
		gap: 0.25rem;
		max-width: 11.5rem;
		padding: 0.3rem;
		transform: none;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.gpgpl-key-item {
		padding: 0.18rem 0.45rem 0.18rem 0.18rem;
		font-size: 0.72rem;
	}

	.gpgpl-key-name {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.gpgpl-key-num {
		min-width: 20px;
		height: 20px;
	}
}

/* "Add your own plant": its 3D shape, in its colour, beside Category */
.gpgpl-new-category-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gpgpl-new-category-row .gpgpl-new-category {
	flex: 1 1 auto;
	min-width: 0;
}

.gpgpl-new-preview {
	flex: none;
	width: 40px;
	height: 40px;
	background-color: #4A6A34;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center bottom;
	mask-position: center bottom;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: background-color var(--gpgpl-dur) ease;
}

/* ==========================================================================
   1.9: plant locks, undo in 3D, no zoom-in when typing on phones
   ========================================================================== */

/* Lock / Unlock on the plant card */
.gpgpl-icon-btn.gpgpl-lock-plant-btn {
	width: auto;
	gap: 0.3rem;
	padding: 0 0.55rem;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.78rem;
	font-weight: 700;
}

.gpgpl-lock-plant-btn[aria-pressed="true"] {
	background: var(--gpgpl-leaf-dark);
	border-color: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-lock-plant-btn[aria-pressed="true"]:hover {
	background: var(--gpgpl-ink);
	color: #FCF9F3;
}

/* Open padlock while unlocked */
.gpgpl-lock-plant-btn[aria-pressed="false"] .gpgpl-lock-shackle {
	transform: translateX(4px) rotate(18deg);
	transform-origin: 15.5px 10px;
}

/* A locked plant on the plan: a small padlock badge, and no grab cursor */
.gpgpl-plant-token.is-locked {
	cursor: default;
}

.gpgpl-plant-token.is-locked::after {
	content: "";
	position: absolute;
	top: -3px;
	right: -3px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--gpgpl-leaf-dark) center / 9px 9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2.5' fill='%23fff'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5' fill='none' stroke='%23fff' stroke-width='3'/%3E%3C/svg%3E");
	box-shadow: 0 0 0 1.5px #FCF9F3;
	pointer-events: none;
}

/* Phones and tablets: 16px text in form fields, so iPhones don't zoom the
   page in when you tap into one (they do below 16px). */
@media (pointer: coarse) {
	.gpgpl-app input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
	.gpgpl-app select,
	.gpgpl-app textarea,
	.gpgpl-design-area input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]),
	.gpgpl-design-area select,
	.gpgpl-design-area textarea {
		font-size: 16px;
	}
}

/* Locked plants let taps and drags through to whatever is underneath
   (press and hold one to open its card and unlock it) */
.gpgpl-plant-token.is-locked {
	pointer-events: none;
}

/* ==========================================================================
   1.12: straight or curved corners (garden-planner-curves.js)
   ========================================================================== */

/* A curved corner: a dot inside its ring */
.gpgpl-feature-handle.is-curved,
.gpgpl-shape-handle.is-curved {
	stroke-dasharray: 4 2.5;
}

/* Held long enough to curve: it says so */
.gpgpl-feature-handle.is-curving,
.gpgpl-shape-handle.is-curving {
	fill: var(--gpgpl-leaf);
	stroke: #FCF9F3;
	animation: gpgpl-curve-ready 0.5s ease infinite alternate;
}

@keyframes gpgpl-curve-ready {
	to { stroke-width: 5; }
}

/* The selected curved corner's handle: drag either dot */
.gpgpl-curve-arm {
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 1.5;
	stroke-dasharray: 3 3;
	pointer-events: none;
}

.gpgpl-curve-knob {
	fill: var(--gpgpl-leaf);
	stroke: #FCF9F3;
	stroke-width: 2.5;
	cursor: grab;
	pointer-events: auto;
	touch-action: none;
	filter: drop-shadow(0 1px 2px rgba(51, 41, 31, 0.4));
}

.gpgpl-curve-knob:active {
	cursor: grabbing;
}

/* Bigger knobs for fingers */
@media (pointer: coarse) {
	.gpgpl-curve-knob {
		r: 11px;
	}
}

.gpgpl-feature-point-curve[hidden] {
	display: none;
}

/* ==========================================================================
   1.13: quick buttons above the selected plant or feature
   (garden-planner-actions.js), the same in plan and 3D
   ========================================================================== */
.gpgpl-action-bar {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 24;
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 14px;
	background: var(--gpgpl-leaf-dark);
	box-shadow: 0 8px 22px rgba(51, 41, 31, 0.32);
	will-change: transform;
	animation: gpgpl-action-in 0.16s ease;
}

.gpgpl-action-bar[hidden] {
	display: none;
}

/* A little pointer towards the selected item */
.gpgpl-action-bar::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: var(--gpgpl-leaf-dark);
	transform: rotate(45deg);
	border-radius: 2px;
}

.gpgpl-action-bar.is-below::after {
	top: -5px;
	bottom: auto;
}

@keyframes gpgpl-action-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.gpgpl-action-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 52px;
	height: 46px;
	padding: 0 6px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-action-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.gpgpl-action-btn:active {
	background: rgba(255, 255, 255, 0.2);
}

.gpgpl-action-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: -2px;
}

.gpgpl-action-btn.is-danger svg {
	color: #FFB4A6;
}

.gpgpl-action-btn.is-on {
	background: rgba(224, 176, 74, 0.22);
	color: var(--gpgpl-gold);
}

/* Out of the way during the walk-through and while full screen fades its controls */
.gpgpl-design-area.is-walking .gpgpl-action-bar {
	display: none;
}

/* ==========================================================================
   1.14: locked items' quick buttons; To back / To front
   ========================================================================== */

/* A plant sent to the back: see-through, behind the others, and taps go
   to whatever is beneath it */
.gpgpl-plant-token.is-back {
	opacity: 0.45;
	pointer-events: none;
}

.gpgpl-plant-token.is-back.is-selected {
	opacity: 0.8;
}

/* A locked item's bar: just Unlock and To back / To front */
.gpgpl-action-bar.is-compact .gpgpl-action-btn {
	min-width: 58px;
}

/* ---- Ground levels: terraces and slopes ---- */
.gpgpl-levels {
	display: grid;
	gap: 0.45rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--gpgpl-border);
}

.gpgpl-levels-title {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-levels-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gpgpl-levels-btns .gpgpl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.gpgpl-feature-edge.gpgpl-level-edge {
	stroke: var(--gpgpl-level-color, #8A6A43);
	stroke-width: 4;
	stroke-linejoin: round;
}

.gpgpl-feature.gpgpl-level.is-selected .gpgpl-feature-edge.gpgpl-level-edge {
	stroke: var(--gpgpl-gold);
	stroke-width: 4;
}

.gpgpl-level-decor,
.gpgpl-level-label,
.gpgpl-level-arrow {
	pointer-events: none;
}

.gpgpl-level-label {
	font-family: var(--gpgpl-font-ui);
	font-size: 12px;
	font-weight: 800;
	fill: #4A3A22;
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.92);
	stroke-width: 3.5px;
	stroke-linejoin: round;
}

.gpgpl-level-arrow {
	fill: none;
	stroke: #4A3A22;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.8;
}

.gpgpl-feature-size.is-level .gpgpl-feature-size-options {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.gpgpl-level-field-label {
	padding-left: 0.35rem;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-fall-compass {
	display: grid;
	grid-template-columns: repeat(3, 34px);
	grid-template-rows: repeat(3, 34px);
	gap: 3px;
	margin-left: auto;
}

.gpgpl-fall-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--gpgpl-border);
	border-radius: 9px;
	background: #FCF9F3;
	font-size: 17px;
	line-height: 1;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-fall-btn.is-active {
	border-color: var(--gpgpl-leaf-dark);
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-fall-mid {
	border-radius: 50%;
	background: radial-gradient(circle, var(--gpgpl-ink-soft) 0 3px, transparent 4px);
	opacity: 0.5;
}

/* ---- Paths over ground levels: steps and ramps ---- */
.gpgpl-cross-decor,
.gpgpl-cross-line {
	pointer-events: none;
}

.gpgpl-cross-line {
	fill: none;
	stroke: rgba(40, 32, 20, 0.85);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.gpgpl-feature-cross {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.6rem;
}

.gpgpl-feature-cross[hidden] {
	display: none;
}

.gpgpl-feature-cross-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-cross-options {
	display: flex;
	gap: 0.35rem;
}

.gpgpl-cross-note {
	display: grid;
	gap: 0.1rem;
	flex-basis: 100%;
	margin: 0;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

/* Short landscape screens: the features menu in two columns, so terraces
   and slopes fit without scrolling */
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-side-actions .gpgpl-build-menu {
		display: grid;
		grid-template-columns: repeat(2, minmax(180px, 1fr));
		column-gap: 0.2rem;
	}

	.gpgpl-build-menu .gpgpl-add-menu-sep {
		grid-column: 1 / -1;
	}

	.gpgpl-build-menu .gpgpl-add-menu-item {
		padding-top: 0.6rem;
		padding-bottom: 0.6rem;
	}
}

/* =====================================================================
   Garden scores: wildlife and year-round interest (garden-planner-score.js)
   ===================================================================== */
.gpgpl-design-area .gpgpl-score-bar {
	display: flex;
	gap: 0.5rem;
	pointer-events: none;
}

.gpgpl-design-area .gpgpl-score-bar[hidden] {
	display: none;
}

.gpgpl-score-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	padding: 4px 12px 4px 4px;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
	pointer-events: auto;
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-score-chip:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-score-ring {
	--ring: var(--gpgpl-leaf);
	--ring-bg: #E2E8D3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: conic-gradient(var(--ring) 0 var(--p, 0%), var(--ring-bg) var(--p, 0%) 100%);
	transition: --p 0.6s;
}

.gpgpl-score-ring > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-score-chip.is-year .gpgpl-score-ring {
	--ring: #D9822B;
	--ring-bg: #FBE7D0;
}

.gpgpl-score-chip.is-year .gpgpl-score-ring > span {
	color: #9A4F12;
}

.gpgpl-score-chip-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.gpgpl-score-chip-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-score-chip-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
}

.gpgpl-score-chip-value b {
	font-family: var(--gpgpl-font-display);
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--gpgpl-ink);
}

.gpgpl-score-wild-level {
	color: #4A6A34;
}

/* Short landscape screens: just the rings and numbers */
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-score-chip-label,
	.gpgpl-score-wild-level {
		display: none;
	}
}

/* The toast when a score goes up */
.gpgpl-score-toast {
	position: absolute;
	left: 50%;
	bottom: calc(var(--gpgpl-pad-b) + var(--gpgpl-ctl) + 1rem);
	z-index: 26;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min(440px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r) - 1rem));
	padding: 0.7rem 0.9rem;
	border: none;
	border-radius: 18px;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	text-align: left;
	box-shadow: 0 14px 36px rgba(51, 41, 31, 0.32);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 16px) scale(0.97);
	transition: opacity 0.22s ease, transform 0.34s var(--gpgpl-ease), visibility 0s linear 0.34s;
}

.gpgpl-score-toast.is-shown {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.gpgpl-score-toast-big {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 46px;
	height: 46px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 14px;
	background: var(--gpgpl-gold);
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	font-weight: 800;
}

.gpgpl-score-toast.is-shown .gpgpl-score-toast-big {
	animation: gpgpl-score-pop 0.6s var(--gpgpl-ease) 0.12s both;
}

@keyframes gpgpl-score-pop {
	0% { transform: scale(0.6); }
	60% { transform: scale(1.12); }
	100% { transform: scale(1); }
}

.gpgpl-score-toast-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gpgpl-score-toast-title {
	font-size: 0.88rem;
	font-weight: 700;
}

.gpgpl-score-toast-sub {
	font-size: 0.78rem;
	color: #DFE6D0;
}

/* The panel */
.gpgpl-score-panel {
	background: var(--gpgpl-paper);
}

.gpgpl-score-tabs {
	display: flex;
	gap: 4px;
	margin: 0 1rem 0.25rem;
	padding: 4px;
	border-radius: 14px;
	background: #FCF9F3;
	box-shadow: 0 2px 10px rgba(51, 41, 31, 0.06);
}

.gpgpl-score-tab {
	flex: 1;
	min-height: 40px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	font: 600 0.85rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-score-tab.is-active {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-score-body {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	color: var(--gpgpl-ink);
}

.gpgpl-score-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding: 1rem;
	border-radius: 20px;
	background: #FCF9F3;
	box-shadow: 0 8px 24px rgba(51, 41, 31, 0.08);
}

.gpgpl-score-card.is-list {
	align-items: stretch;
	gap: 0.6rem;
}

.gpgpl-score-h {
	margin: 0.2rem 0.1rem 0;
	font: 700 0.95rem var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

.gpgpl-score-card.is-list .gpgpl-score-h {
	margin: 0;
}

.gpgpl-score-sub,
.gpgpl-score-note {
	margin: 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	text-align: center;
}

.gpgpl-score-card.is-list .gpgpl-score-sub {
	text-align: left;
}

.gpgpl-score-note {
	padding: 0 0.5rem;
}

/* Wildlife: the ring and its visitors */
.gpgpl-score-orbit {
	position: relative;
	width: 230px;
	height: 230px;
}

.gpgpl-score-big-ring {
	position: absolute;
	left: 35px;
	top: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: conic-gradient(var(--gpgpl-leaf) 0 var(--p, 0%), #E2E8D3 var(--p, 0%) 100%);
}

.gpgpl-score-big-ring > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: #FCF9F3;
}

.gpgpl-score-big-num {
	font: 800 2.8rem/1 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

.gpgpl-score-big-of {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-score-visitor {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	box-sizing: border-box;
	border-radius: 50%;
	background: #F2EADC;
	color: #7A6A58;
	box-shadow: 0 0 0 4px #FCF9F3;
}

.gpgpl-score-visitor.is-off {
	border: 2px dashed #E2D6C2;
}

.gpgpl-score-visitor.is-some {
	opacity: 0.75;
}

.gpgpl-score-level {
	margin: 0;
	font: 800 1.4rem var(--gpgpl-font-display);
	color: #4A6A34;
}

.gpgpl-score-ladder {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
	width: 100%;
	margin-top: 0.2rem;
}

.gpgpl-score-step {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
}

.gpgpl-score-step-bar {
	width: 100%;
	height: 8px;
	border-radius: 4px;
	background: #E2E8D3;
	overflow: hidden;
}

.gpgpl-score-step-bar > span {
	display: block;
	height: 100%;
	background: var(--gpgpl-leaf);
}

.gpgpl-score-step-name {
	font-size: 0.66rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-score-step-name.is-current {
	font-weight: 800;
	color: var(--gpgpl-ink);
}

.gpgpl-score-rows {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gpgpl-score-row {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	padding: 0.7rem 0.8rem;
	border-radius: 16px;
	background: #FCF9F3;
}

.gpgpl-score-row.is-off {
	box-shadow: inset 0 0 0 2px #E2D6C2;
	background: #FAF6EE;
}

.gpgpl-score-row-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #F2EADC;
	color: #7A6A58;
}

.gpgpl-score-row-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	min-width: 0;
	flex: 1;
}

.gpgpl-score-row-name {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 700;
	font-size: 0.92rem;
}

.gpgpl-score-row-why {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-score-status {
	padding: 2px 8px;
	border-radius: 999px;
	background: #F2EADC;
	color: var(--gpgpl-ink-soft);
	font-size: 0.68rem;
	font-weight: 700;
}

.gpgpl-score-status.is-on {
	background: #E2E8D3;
	color: #38522A;
}

.gpgpl-score-status.is-some {
	background: #FFF1D6;
	color: #8A5A00;
}

.gpgpl-score-gain {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 36px;
	padding: 0.35rem 0.75rem;
	border: none;
	border-radius: 999px;
	background: var(--gpgpl-gold);
	color: var(--gpgpl-leaf-dark);
	font: 700 0.8rem var(--gpgpl-font-ui);
	cursor: pointer;
	flex-shrink: 0;
}

.gpgpl-score-gain b {
	font-family: var(--gpgpl-font-display);
	font-weight: 800;
}

/* Year-round: the year flower */
.gpgpl-year-flower {
	position: relative;
	flex-shrink: 0;
}

.gpgpl-petal {
	position: absolute;
	width: 30px;
	padding: 0;
	border: none;
	border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%;
	cursor: pointer;
	transition: height 0.5s var(--gpgpl-ease), filter 0.2s;
}

.gpgpl-petal.is-quiet {
	opacity: 0.45;
}

.gpgpl-petal.is-selected {
	opacity: 1;
	box-shadow: 0 0 0 3px #FCF9F3, 0 0 0 5px var(--gpgpl-gold);
}

.gpgpl-petal:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-year-centre {
	position: absolute;
	left: calc(50% - 32px);
	top: calc(50% - 32px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--gpgpl-gold);
	box-shadow: 0 0 0 5px #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	pointer-events: none;
}

.gpgpl-year-centre span {
	font: 800 1.2rem/1 var(--gpgpl-font-display);
}

.gpgpl-year-centre small {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.gpgpl-petal-label {
	position: absolute;
	width: 32px;
	text-align: center;
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	pointer-events: none;
}

.gpgpl-petal-label.is-quiet {
	color: var(--gpgpl-clay-dark);
	font-weight: 700;
}

.gpgpl-score-keys {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem 0.9rem;
}

.gpgpl-score-key {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.72rem;
	font-weight: 600;
}

.gpgpl-score-key > span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.gpgpl-score-detail {
	margin: 0;
	font-size: 0.82rem;
	color: var(--gpgpl-ink-soft);
	text-align: center;
}

.gpgpl-score-detail b {
	color: var(--gpgpl-ink);
}

.gpgpl-score-sugg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	font-size: 0.88rem;
}

.gpgpl-score-sugg span span {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

/* Badges: the medal, the badges and what's next */
.gpgpl-score-medal {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1rem;
	border-radius: 20px;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-score-medal-top {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.gpgpl-score-medal-top > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gpgpl-score-medal-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	color: var(--gpgpl-leaf-dark);
	background: #E2D6C2;
	box-shadow: inset 0 0 0 5px #F2EADC, 0 0 0 3px #7A6A58;
}

.gpgpl-score-medal.is-gold .gpgpl-score-medal-disc {
	background: #FFC85C;
	box-shadow: inset 0 0 0 5px #FFE3A3, 0 0 0 3px #C98F1C;
}

.gpgpl-score-medal.is-bronze .gpgpl-score-medal-disc {
	background: #D9A06B;
	box-shadow: inset 0 0 0 5px #EFC79F, 0 0 0 3px #9A6232;
}

.gpgpl-score-medal.is-seedling .gpgpl-score-medal-disc {
	background: #DFE6D0;
	box-shadow: inset 0 0 0 5px #EAE9D8, 0 0 0 3px #8FA46A;
}

.gpgpl-score-medal-name {
	font: 800 1.4rem/1.1 var(--gpgpl-font-display);
}

.gpgpl-score-medal-next {
	font-size: 0.8rem;
	color: #DFE6D0;
}

.gpgpl-score-medal-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}

.gpgpl-score-medal-stats > span {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.6rem 0.75rem;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.08);
}

.gpgpl-score-medal-stats small {
	font-size: 0.75rem;
	font-weight: 600;
	color: #DFE6D0;
}

.gpgpl-score-medal-stats b {
	font: 800 1.35rem/1 var(--gpgpl-font-display);
}

.gpgpl-score-medal-stats i {
	font: normal 600 0.72rem var(--gpgpl-font-ui);
	color: #DFE6D0;
}

.gpgpl-score-meter {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: #FBE7D0;
	overflow: hidden;
}

.gpgpl-score-meter > span {
	display: block;
	height: 100%;
	border-radius: 4px;
	background: #D9822B;
}

.gpgpl-score-meter.is-dark {
	height: 6px;
	background: rgba(255, 255, 255, 0.18);
}

.gpgpl-score-meter.is-dark > span {
	background: #8FA46A;
}

.gpgpl-score-meter.is-dark.is-year > span {
	background: var(--gpgpl-gold);
}

.gpgpl-score-next {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 0.82rem;
}

.gpgpl-score-next > span {
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-badges {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.55rem;
}

.gpgpl-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 0.3rem;
	border-radius: 16px;
	background: #FCF9F3;
	text-align: center;
}

.gpgpl-badge.is-locked {
	box-shadow: inset 0 0 0 2px #E2D6C2;
	background: #FAF6EE;
}

.gpgpl-badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #F2EADC;
	color: #7A6A58;
}

.gpgpl-badge-name {
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.25;
}

.gpgpl-badge.is-locked .gpgpl-badge-name {
	color: var(--gpgpl-ink-soft);
}

.gpgpl-score-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 50px;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font: 700 0.95rem var(--gpgpl-font-ui);
	cursor: pointer;
}

@property --p {
	syntax: '<percentage>';
	inherits: true;
	initial-value: 0%;
}

.gpgpl-score-warn {
	margin: 0;
	padding: 0.7rem 0.85rem;
	border-radius: 14px;
	background: #FFF4E5;
	color: #7A4A00;
	font-size: 0.82rem;
	font-weight: 600;
}

/* ---- Monthly jobs checklist (Garden score → Jobs) ---- */
.gpgpl-score-tab {
	padding: 0 0.25rem;
	font-size: 0.8rem;
}

.gpgpl-jobs-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.gpgpl-jobs-month {
	font: 700 1.1rem var(--gpgpl-font-display);
}

.gpgpl-jobs-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: #F2EADC;
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-jobs-top {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.gpgpl-jobs-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: conic-gradient(var(--gpgpl-leaf) 0 var(--p, 0%), #E2E8D3 var(--p, 0%) 100%);
}

.gpgpl-jobs-ring > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: #FCF9F3;
}

.gpgpl-jobs-ring b {
	font: 800 1.3rem/1 var(--gpgpl-font-display);
}

.gpgpl-jobs-ring small {
	font-size: 0.62rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-jobs-badge {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.gpgpl-jobs-badge > span:last-child {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gpgpl-jobs-badge b {
	font-size: 0.92rem;
}

.gpgpl-jobs-badge small {
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-jobs-badge:not(.is-earned) .gpgpl-badge-icon {
	box-shadow: inset 0 0 0 2px #E2D6C2;
}

.gpgpl-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gpgpl-job {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.8rem 0.85rem;
	border-radius: 16px;
	background: #FCF9F3;
	cursor: pointer;
}

.gpgpl-job input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gpgpl-job-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	box-shadow: inset 0 0 0 2px #E2D6C2;
	color: transparent;
	transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.25s var(--gpgpl-ease);
}

.gpgpl-job input:checked + .gpgpl-job-box {
	background: var(--gpgpl-leaf);
	box-shadow: none;
	color: #FCF9F3;
	transform: scale(1.06);
}

.gpgpl-job input:focus-visible + .gpgpl-job-box {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-job input:disabled + .gpgpl-job-box {
	opacity: 0.5;
}

.gpgpl-job-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.gpgpl-job-title {
	font-size: 0.92rem;
	font-weight: 700;
}

.gpgpl-job.is-done .gpgpl-job-title {
	color: var(--gpgpl-ink-soft);
	text-decoration: line-through;
}

.gpgpl-job-meta {
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-job-when {
	display: block;
	margin-top: 2px;
	color: #2f6f8f;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: normal;
}

.gpgpl-job-how {
	font-size: 0.78rem;
	color: var(--gpgpl-ink);
	opacity: 0.8;
}

.gpgpl-job.is-done .gpgpl-job-how {
	display: none;
}

.gpgpl-job-flag {
	flex-shrink: 0;
	padding: 2px 8px;
	border-radius: 999px;
	background: #FFF1D6;
	color: #8A5A00;
	font-size: 0.66rem;
	font-weight: 700;
}

.gpgpl-month-strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.45rem;
}

.gpgpl-month-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	min-height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #F2EADC;
	color: #7A6A58;
	font: 700 0.8rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-month-badge.is-now {
	box-shadow: inset 0 0 0 2px var(--gpgpl-leaf);
	color: var(--gpgpl-ink);
}

.gpgpl-month-badge.is-missed {
	opacity: 0.55;
}

.gpgpl-month-badge.is-future {
	background: transparent;
	box-shadow: inset 0 0 0 1px #E2D6C2;
}

.gpgpl-push-card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.7rem !important;
}

.gpgpl-push-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #FFF1D6;
	color: #8A5A00;
}

.gpgpl-push-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
	font-size: 0.88rem;
}

.gpgpl-push-text small {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-push-off {
	min-height: 36px;
	padding: 0 0.8rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink-soft);
	font: 600 0.8rem var(--gpgpl-font-ui);
	cursor: pointer;
	flex-shrink: 0;
}

a.gpgpl-score-gain {
	text-decoration: none;
}

/* =====================================================================
   1.20: Plan / 3D switch in the dock, after undo (zoom buttons and the
   3D camera angles are gone — pinch, scroll or drag instead)
   ===================================================================== */

.gpgpl-design-area .gpgpl-dock .gpgpl-view-switch {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 0.15rem;
	height: var(--gpgpl-ctl);
	box-sizing: border-box;
	margin: 0;
	padding: 0.25rem;
	border-radius: 14px;
}

.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
	padding: 0 0.75rem;
	border-radius: 10px;
	font-size: 0.88rem;
	white-space: nowrap;
}

@media (max-width: 430px) {
	.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		gap: 0.3rem;
		padding: 0 0.55rem;
		font-size: 0.84rem;
	}
}

/* Phones: words only, so undo + switch + three buttons fit in 3D */
@media (max-width: 430px) {
	.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn svg {
		display: none;
	}
}

@media (max-width: 370px) {
	.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		padding: 0 0.45rem;
		font-size: 0.8rem;
	}
}

@media (max-width: 330px) {
	.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		padding: 0 0.4rem;
		font-size: 0.78rem;
	}
}

@media (max-width: 340px) {
	.gpgpl-app {
		--gpgpl-ctl: 38px;
	}

	.gpgpl-dock,
	.gpgpl-dock-group {
		gap: 0.25rem;
	}

	.gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		padding: 0 0.35rem;
		font-size: 0.76rem;
	}
}

/* =====================================================================
   1.22: Move handle — a round four-arrow button under the selected plant
   or feature. Drag it and the item follows, clear of the finger.
   (garden-planner-actions.js)
   ===================================================================== */

.gpgpl-move-handle {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 24;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 2px solid rgba(51, 41, 31, 0.14);
	border-radius: 50%;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	box-shadow: 0 6px 16px rgba(51, 41, 31, 0.22);
	cursor: grab;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	will-change: transform;
	animation: gpgpl-action-in 0.16s ease;
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease, box-shadow var(--gpgpl-dur) ease;
}

.gpgpl-move-handle[hidden] {
	display: none;
}

/* A bigger target than it looks, for thumbs */
.gpgpl-move-handle::before {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
}

.gpgpl-move-handle:hover {
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-move-handle.is-dragging {
	cursor: grabbing;
	background: var(--gpgpl-leaf-dark);
	border-color: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
	box-shadow: 0 10px 24px rgba(51, 41, 31, 0.34);
}

.gpgpl-move-handle:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* While moving with the handle, the item's quick buttons fade back */
.gpgpl-design-area.is-handle-moving .gpgpl-action-bar {
	opacity: 0.35;
	pointer-events: none;
}

/* Out of the way with the rest of the controls in full screen */
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-move-handle {
	opacity: 0;
	pointer-events: none;
}

/* "Edit shape" in the feature card: 3D only (the plan has the corners) */
.gpgpl-design-area.is-view-plan .gpgpl-feature-edit-shape {
	display: none;
}

.gpgpl-feature-edit-shape {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* =====================================================================
   1.23: Corner bar — over the selected corner while drawing or editing
   a shape (garden features and the garden's outline): Curved / Straight
   and Delete. Same look as the quick buttons above a selected item.
   (GPGPLCurves.PointBar in garden-planner-curves.js)
   ===================================================================== */

.gpgpl-point-bar {
	--gpgpl-point-arrow: 50%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 26;
	display: flex;
	gap: 2px;
	padding: 4px;
	border-radius: 14px;
	background: var(--gpgpl-leaf-dark);
	box-shadow: 0 8px 22px rgba(51, 41, 31, 0.32);
	will-change: transform;
	animation: gpgpl-action-in 0.16s ease;
	touch-action: manipulation;
}

.gpgpl-point-bar[hidden] {
	display: none;
}

/* Pointing at the corner */
.gpgpl-point-bar::after {
	content: "";
	position: absolute;
	left: var(--gpgpl-point-arrow);
	bottom: -5px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	background: var(--gpgpl-leaf-dark);
	transform: rotate(45deg);
	border-radius: 2px;
}

.gpgpl-point-bar.is-below::after {
	top: -5px;
	bottom: auto;
}

.gpgpl-point-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 64px;
	height: 46px;
	padding: 0 8px;
	border: none;
	border-radius: 10px;
	background: transparent;
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease;
}

.gpgpl-point-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.gpgpl-point-btn:active {
	background: rgba(255, 255, 255, 0.2);
}

.gpgpl-point-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: -2px;
}

.gpgpl-point-btn.is-danger svg {
	color: #FFB4A6;
}

.gpgpl-point-btn:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* The selected corner while drawing stands out like an edited one */
.gpgpl-feature-handles.is-drawing .gpgpl-feature-handle.is-selected,
.gpgpl-feature-handle.is-selected {
	stroke-width: 3.5;
}

/* Full screen fading its controls: the bar goes too */
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-point-bar {
	opacity: 0;
	pointer-events: none;
}

/* =====================================================================
   1.24: The garden's climate (garden-planner-climate.js)
   ===================================================================== */

.gpgpl-climate-panel .gpgpl-panel-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gpgpl-clim-intro {
	margin: 0;
	color: var(--gpgpl-ink-soft);
	font-size: 0.92rem;
	line-height: 1.45;
}

/* From the garden's location (1.51) */
.gpgpl-clim-loc {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.8rem 0.9rem;
	border-radius: 14px;
	background: rgba(74, 106, 52, 0.08);
	border: 1px solid rgba(74, 106, 52, 0.22);
}

.gpgpl-clim-loc-head {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
}

.gpgpl-clim-loc-head strong {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-clim-loc-text,
.gpgpl-clim-loc-ok {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	white-space: normal;
}

.gpgpl-clim-loc-ok {
	color: var(--gpgpl-leaf, #4A6A34);
	font-weight: 600;
}

.gpgpl-clim-loc .gpgpl-btn {
	white-space: normal;
	min-height: 48px;
}

.gpgpl-clim-loc .gpgpl-wx-form,
.gpgpl-clim-loc .gpgpl-wx-results,
.gpgpl-clim-loc .gpgpl-wx-privacy {
	margin: 0;
}

.gpgpl-clim-loc .gpgpl-wx-result span {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpgpl-clim-or {
	margin: 0.2rem 0 -0.4rem;
	color: var(--gpgpl-ink-soft);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.gpgpl-clim-group {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

.gpgpl-clim-group legend {
	margin: 0 0 0.5rem;
	padding: 0;
	font-family: var(--gpgpl-font-display, inherit);
	font-size: 1rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-clim-hemi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
}

.gpgpl-clim-cold {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.gpgpl-clim-opt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.2rem;
	padding: 0.75rem 0.85rem;
	border: 2px solid var(--gpgpl-border);
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
	transition: border-color var(--gpgpl-dur) ease, background var(--gpgpl-dur) ease;
}

.gpgpl-clim-opt strong {
	font-size: 0.95rem;
}

.gpgpl-clim-opt span {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	line-height: 1.35;
}

.gpgpl-clim-opt[aria-checked="true"] {
	border-color: var(--gpgpl-leaf);
	background: var(--gpgpl-paper-panel, #EAE9D8);
}

.gpgpl-clim-opt:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-clim-opt.is-row {
	flex-direction: row;
	align-items: center;
	gap: 0.75rem;
}

.gpgpl-clim-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.gpgpl-clim-text > span {
	font-size: 0.8rem;
}

.gpgpl-clim-dot {
	flex: none;
	width: 20px;
	height: 20px;
	border: 2px solid var(--gpgpl-border);
	border-radius: 50%;
	background: #FCF9F3;
	box-sizing: border-box;
}

.gpgpl-clim-opt[aria-checked="true"] .gpgpl-clim-dot {
	border: 6px solid var(--gpgpl-leaf);
}

.gpgpl-clim-note {
	margin: 0.4rem 0 0;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-clim-dry {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.85rem;
	border: 2px solid var(--gpgpl-border);
	border-radius: 14px;
	background: #FCF9F3;
	cursor: pointer;
}

.gpgpl-clim-dry input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-clim-dry > span {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.gpgpl-clim-dry strong {
	font-size: 0.95rem;
	color: var(--gpgpl-ink);
}

.gpgpl-clim-dry > span > span {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	line-height: 1.35;
}

.gpgpl-clim-dry:has(input:checked) {
	border-color: var(--gpgpl-leaf);
	background: var(--gpgpl-paper-panel, #EAE9D8);
}

.gpgpl-clim-actions {
	display: flex;
	justify-content: flex-end;
	padding-bottom: 0.25rem;
}

.gpgpl-clim-actions .gpgpl-btn {
	min-width: 8rem;
}

/* "Climate" in Garden size & shape */
.gpgpl-climate-row {
	display: grid;
	gap: 0.45rem;
	padding-top: 0.7rem;
	border-top: 1px solid var(--gpgpl-border);
}

.gpgpl-climate-btn {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.85rem;
	text-align: left;
	cursor: pointer;
}

.gpgpl-climate-btn svg {
	flex: none;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-climate-summary {
	flex: 1;
	min-width: 0;
}

.gpgpl-climate-change {
	flex: none;
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
	text-decoration: underline;
}

/* The plant card: hardy here? copes with drought? */
.gpgpl-info-climate {
	margin: 0.5rem 0 0;
	padding: 0.55rem 0.7rem;
	border-radius: 10px;
	background: #EAE9D8;
	color: var(--gpgpl-ink);
	font-size: 0.82rem;
	line-height: 1.4;
}

.gpgpl-info-climate.is-warn {
	background: #E7F0FB;
	color: #1D4268;
}

.gpgpl-info-climate.is-warn::before {
	content: "❄️ ";
}

/* Too tender for the winters: a small snowflake on the plan */
.gpgpl-plant-token.is-tender::after {
	content: "❄";
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #2F6DB5;
	color: #FCF9F3;
	font-size: 11px;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px #FCF9F3;
	pointer-events: none;
}

.gpgpl-chip-tender {
	color: #2F6DB5;
	font-weight: 700;
}

.gpgpl-chip-dry {
	color: #8A5A1E;
	font-weight: 700;
}

/* The finder: which climate its suggestions follow */
.gpgpl-find-climate {
	margin: 0 0 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 10px;
	background: #EAE9D8;
	font-size: 0.85rem;
	line-height: 1.4;
}

/* A pop-up that spans the screen (Garden size & shape on phones): the
   side buttons step back so they don't sit over it (it has its own Done). */
@media (max-width: 700px) {
	.gpgpl-design-area.has-pop .gpgpl-side-actions {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* =====================================================================
   1.24.2: "Your garden" pop-up (size, shape, climate, levels, clearing)
   Compact for phones: a header with Done, the size, then icon tiles.
   Fits the screen's width and height whatever the theme's styles.
   ===================================================================== */

.gpgpl-design-area .gpgpl-pop.gpgpl-pop-bed {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: 22; /* over the top bar if it reaches up that far: the title and Done always show */
	max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-pad-b) - var(--gpgpl-ctl) - 1.5rem);
	padding: 0;
	overflow: hidden;
}

.gpgpl-pop-bed *,
.gpgpl-pop-bed *::before,
.gpgpl-pop-bed *::after {
	box-sizing: border-box;
}

.gpgpl-pop-bed .gpgpl-bed-config {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	min-height: 0;
	max-height: 100%;
	width: 100%;
}

.gpgpl-gs-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.7rem 0.8rem 0.6rem 1rem;
	border-bottom: 1px solid var(--gpgpl-border);
	flex: none;
}

.gpgpl-gs-head .gpgpl-pop-title {
	margin: 0;
	min-width: 0;
	font-size: 1.05rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-pop-bed .gpgpl-gs-done {
	flex: none;
	min-width: 5.5rem;
	margin: 0;
	padding: 0.55rem 1.1rem;
	white-space: nowrap;
}

.gpgpl-gs-body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	padding: 0.8rem 1rem 1rem;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	min-height: 0;
}

/* Size: an icon, the dropdown */
.gpgpl-pop-bed .gpgpl-bed-size {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	min-width: 0;
}

.gpgpl-gs-label {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	color: var(--gpgpl-ink-soft);
	font-weight: 700;
	font-size: 0.85rem;
}

.gpgpl-pop-bed .gpgpl-bed-size-label {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	font-weight: 700;
}

.gpgpl-pop-bed .gpgpl-bed-size-select {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0.55rem 0.6rem;
	font-size: 16px; /* no zoom-in on iPhone */
}

/* Custom size: W × L unit ✓ on one line */
.gpgpl-pop-bed .gpgpl-custom-size:not([hidden]) {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.4rem;
	min-width: 0;
}

.gpgpl-pop-bed .gpgpl-custom-size input {
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	margin: 0;
	padding: 0.5rem 0.55rem;
	font-size: 16px;
}

.gpgpl-pop-bed .gpgpl-custom-x,
.gpgpl-pop-bed .gpgpl-custom-unit-label {
	flex: none;
	color: var(--gpgpl-ink-soft);
	font-weight: 700;
}

.gpgpl-pop-bed .gpgpl-custom-size-apply {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border-radius: 12px;
}

/* The tiles */
.gpgpl-gs-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0.45rem;
}

@media (max-width: 340px) {
	.gpgpl-gs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.gpgpl-gs-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.3rem;
	min-width: 0;
	min-height: 76px;
	margin: 0;
	padding: 0.6rem 0.25rem 0.5rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.74rem;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	white-space: normal !important; /* themes often stop button text wrapping */
	overflow-wrap: break-word;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: background var(--gpgpl-dur) ease, border-color var(--gpgpl-dur) ease, transform 0.12s ease;
}

.gpgpl-gs-tile svg {
	flex: none;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-gs-tile span {
	display: block;
	max-width: 100%;
}

.gpgpl-gs-tile small {
	display: block;
	white-space: normal !important;
	max-width: 100%;
	font-size: 0.64rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	line-height: 1.2;
}

.gpgpl-gs-tile:hover {
	background: #FAF6EE;
	border-color: var(--gpgpl-leaf);
}

.gpgpl-gs-tile:active {
	transform: scale(0.96);
}

.gpgpl-gs-tile:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-gs-tile:disabled,
.gpgpl-gs-tile.is-active {
	opacity: 0.55;
}

.gpgpl-gs-tile.is-danger {
	color: var(--gpgpl-clay, #C4553C);
	border-color: rgba(196, 85, 60, 0.35);
}

.gpgpl-gs-tile.is-danger svg {
	color: var(--gpgpl-clay, #C4553C);
}

/* The shape tile keeps its Premium padlock */
.gpgpl-gs-tile.gpgpl-shape-edit-toggle {
	position: relative;
}

/* Wider screens: a little more room */
@media (min-width: 701px) {
	.gpgpl-design-area .gpgpl-pop.gpgpl-pop-bed {
		width: min(440px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	}
}

/* Short landscape screens: tiles in one row of seven where it fits */
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-design-area .gpgpl-pop.gpgpl-pop-bed {
		width: min(640px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r) - 140px));
	}

	.gpgpl-gs-grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}

	.gpgpl-gs-tile {
		min-height: 64px;
		padding: 0.45rem 0.15rem 0.4rem;
	}

	.gpgpl-gs-body {
		gap: 0.55rem;
		padding-top: 0.6rem;
	}
}

/* =====================================================================
   1.25: Back from paying for Premium (GP Stripe Membership)
   ===================================================================== */

.gpgpl-welcome {
	position: absolute;
	left: 50%;
	top: calc(var(--gpgpl-pad-t) + 0.5rem);
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	box-sizing: border-box;
	width: min(460px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	padding: 0.85rem 0.85rem 0.85rem 1rem;
	border-radius: 18px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	box-shadow: 0 14px 40px rgba(51, 41, 31, 0.28);
	opacity: 0;
	transform: translate(-50%, -12px);
	transition: opacity 0.25s ease, transform 0.3s var(--gpgpl-ease);
}

.gpgpl-welcome.is-shown {
	opacity: 1;
	transform: translate(-50%, 0);
}

.gpgpl-welcome-badge {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #F3E9D2;
	color: #A27A1E;
}

.gpgpl-welcome.is-premium .gpgpl-welcome-badge {
	background: var(--gpgpl-gold);
	color: #FCF9F3;
}

.gpgpl-welcome-text {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	white-space: normal;
}

.gpgpl-welcome-go {
	flex: none;
	white-space: nowrap;
	text-decoration: none;
}

.gpgpl-welcome-close {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #EAE9D8;
	color: var(--gpgpl-ink);
	cursor: pointer;
}

/* ---- My designs panel: who's logged in, subscription, log in / out (1.26.0) ---- */
.gpgpl-acc-me-row {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}
.gpgpl-acc-me-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink-soft);
}
.gpgpl-acc-me-badge.is-premium {
	background: #FFF3DC;
	color: #B97A10;
}
.gpgpl-acc-me-badge svg { width: 20px; height: 20px; }
.gpgpl-acc-me-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
}
.gpgpl-acc-me-text strong {
	font-family: var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gpgpl-acc-me-text span {
	font-size: 0.85rem;
	color: var(--gpgpl-ink-soft);
	white-space: normal;
}
:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-acc-me .gpgpl-btn,
:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-acc-login {
	gap: 0.4rem;
	white-space: normal !important;
}
:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-acc-me .gpgpl-acc-actions > * {
	flex: 1 1 auto;
}
.gpgpl-acc-logout {
	border: 1px solid var(--gpgpl-border);
}

/* ---- Free version: one saved design, locked downloads, 3 suggestions (1.27.0) ---- */
:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-btn .gpgpl-acc-lock {
	flex: 0 0 auto;
	margin-right: 0.35rem;
	color: #B97A10;
}
:is(.gpgpl-designs-panel, .gpgpl-hub-designs, .gpgpl-hub-acc) .gpgpl-btn-primary .gpgpl-acc-lock {
	color: #FFE3A8;
}
.gpgpl-acc-premium-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.55rem;
	border-radius: 999px;
	background: #FFF3DC;
	color: #9A6408;
	font-size: 0.75rem;
	font-weight: 600;
}
.gpgpl-acc-premium-tag svg { width: 12px; height: 12px; }

.gpgpl-find-locked {
	position: relative;
	margin: 0 0 0.9rem;
}
.gpgpl-find-ghosts {
	margin: 0;
	filter: blur(5px);
	opacity: 0.75;
	pointer-events: none;
	user-select: none;
}
.gpgpl-find-locked-cta {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	padding: 1rem;
	text-align: center;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.85) 45%, rgba(255, 255, 255, 0.35));
	border-radius: 16px;
}
.gpgpl-find-locked-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gpgpl-gold);
	color: #FCF9F3;
	box-shadow: 0 4px 12px rgba(185, 122, 16, 0.3);
}
.gpgpl-find-locked-cta strong {
	font-family: var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
	font-size: 1.05rem;
	white-space: normal;
}
.gpgpl-find-locked-cta span:not(.gpgpl-find-locked-icon) {
	color: var(--gpgpl-ink-soft);
	font-size: 0.9rem;
}
.gpgpl-find-locked-cta .gpgpl-btn {
	margin-top: 0.4rem;
	white-space: normal !important;
}

/* ---- New feature: Round / Square / Custom, and drawing with a finger (1.28.0) ---- */
.gpgpl-build-menu.is-shape-step > :not(.gpgpl-shape-step) {
	display: none !important;
}
.gpgpl-build-menu.is-shape-step {
	min-width: 270px;
	overflow: visible;
}
.gpgpl-shape-step[hidden] { display: none; }
.gpgpl-shape-step {
	padding: 0.2rem 0.2rem 0.3rem;
}
.gpgpl-shape-step-head {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin: 0 0 0.55rem;
}
.gpgpl-shape-step-back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: #F5EDE6;
	color: #6B4F3A;
	cursor: pointer;
}
.gpgpl-shape-step-title {
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
	color: var(--gpgpl-ink);
}
.gpgpl-shape-step-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.45rem;
}
.gpgpl-shape-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	min-height: 84px;
	padding: 0.55rem 0.3rem;
	border: 1.5px solid #EADFD5;
	border-radius: 14px;
	background: #FBF7F3;
	color: #8A5A3B;
	font: 600 0.88rem/1.2 var(--gpgpl-font-ui);
	white-space: normal !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gpgpl-shape-tile span { color: var(--gpgpl-ink); }
.gpgpl-shape-tile:hover,
.gpgpl-shape-tile:focus-visible {
	border-color: #C9A98E;
	background: #F5EDE6;
	outline: none;
}
.gpgpl-shape-tile:active { transform: scale(0.96); }
.gpgpl-shape-step-note {
	margin: 0.55rem 0.15rem 0;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--gpgpl-ink-soft);
	white-space: normal;
}
.gpgpl-draw-ink {
	fill: none;
	stroke: var(--gpgpl-leaf-dark);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.85;
	pointer-events: none;
}

/* ---- Rotate and Scale either side of the move handle (1.29.0) ---- */
.gpgpl-xform-handle {
	color: #6B4F3A;
	cursor: pointer;
}
.gpgpl-xform-handle.is-rotate { cursor: alias; }
.gpgpl-xform-handle.is-scale { cursor: nwse-resize; }
.gpgpl-xform-handle.is-dragging {
	background: #8A5A3B;
	border-color: #8A5A3B;
	color: #FCF9F3;
}
.gpgpl-xform-readout {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 25;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
	font: 700 0.85rem/1.2 var(--gpgpl-font-ui);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(51, 41, 31, 0.25);
}
.gpgpl-xform-readout[hidden] { display: none; }
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-xform-readout {
	opacity: 0;
}

/* ---- Buildings & furniture (.glb models from the Media Library) (1.31.0) ---- */
.gpgpl-build-menu .gpgpl-build-models svg { color: #8A5A3B; }
.gpgpl-model-step { min-width: 280px; }
.gpgpl-model-group {
	margin: 0.5rem 0.2rem 0.35rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}
.gpgpl-model-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
}
.gpgpl-model-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.3rem;
	min-width: 0;
	padding: 0.45rem 0.35rem 0.5rem;
	border: 1.5px solid #EADFD5;
	border-radius: 14px;
	background: #FBF7F3;
	color: var(--gpgpl-ink);
	font: 600 0.82rem/1.2 var(--gpgpl-font-ui);
	white-space: normal !important;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gpgpl-model-tile:hover,
.gpgpl-model-tile:focus-visible { border-color: #C9A98E; background: #F5EDE6; outline: none; }
.gpgpl-model-tile:active { transform: scale(0.96); }
.gpgpl-model-pic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	max-height: 96px;
	border-radius: 10px;
	background: #FCF9F3;
	overflow: hidden;
}
.gpgpl-model-pic svg { width: 40%; height: 40%; opacity: 0.5; }
.gpgpl-model-pic img { width: 100%; height: 100%; object-fit: contain; }
.gpgpl-model-tile.is-loading .gpgpl-model-pic svg { animation: gpgpl-model-pulse 1s ease-in-out infinite alternate; }
.gpgpl-model-tile.is-broken { opacity: 0.5; }
@keyframes gpgpl-model-pulse { from { opacity: 0.25; } to { opacity: 0.6; } }
.gpgpl-model-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
}
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-side-actions .gpgpl-build-menu.is-shape-step { display: block; }
	.gpgpl-model-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* On the plan: the footprint, with the picture from above over it */
.gpgpl-feature.is-model .gpgpl-feature-body { fill-opacity: 0.35; }
.gpgpl-feature-logpile.is-model .gpgpl-feature-body { fill-opacity: 0.12; }
.gpgpl-feature.is-model .gpgpl-feature-edge { stroke-dasharray: 5 4; }
.gpgpl-feature.is-model.is-loading .gpgpl-feature-body { fill-opacity: 0.6; }
.gpgpl-model-top { pointer-events: none; }

/* Its card: no materials or corner tools, just Lock and Delete */
.gpgpl-feature-panel.is-model .gpgpl-feature-materials,
.gpgpl-feature-panel.is-model .gpgpl-feature-size,
.gpgpl-feature-panel.is-model .gpgpl-feature-smooth,
.gpgpl-feature-panel.is-model .gpgpl-feature-point-curve,
.gpgpl-feature-panel.is-model .gpgpl-feature-add-point,
.gpgpl-feature-panel.is-model .gpgpl-feature-remove-point,
.gpgpl-feature-panel.is-model .gpgpl-feature-rect,
.gpgpl-feature-panel.is-model .gpgpl-feature-edit-shape {
	display: none !important;
}
.gpgpl-feature-swatch.is-model {
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-color: #FCF9F3 !important;
}

/* "Shop for this online" on a building or furniture's card (1.91.0) */
.gpgpl-feature-shop {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-height: 44px;
	margin-top: 0.65rem;
	padding: 0.55rem 1rem;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3 !important;
	font-family: var(--gpgpl-font-ui);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.15s ease, transform 0.15s ease;
}
.gpgpl-feature-shop:hover,
.gpgpl-feature-shop:focus-visible { background: var(--gpgpl-leaf-dark); }
.gpgpl-feature-shop:focus-visible { outline: 3px solid var(--gpgpl-gold); outline-offset: 2px; }
.gpgpl-feature-shop:active { transform: scale(0.98); }
.gpgpl-feature-shop[hidden] { display: none; }

/* ---- Garden lighting (1.33.0) ---- */
.gpgpl-light-item .gpgpl-light-lock {
	margin-left: auto;
	color: #B97A10;
}
.gpgpl-light-item.is-locked span { opacity: 0.75; }

/* On the plan: the reach (or beam), and the fitting as a round badge */
.gpgpl-feature.is-light .gpgpl-feature-body { fill: transparent; }
.gpgpl-feature.is-light .gpgpl-feature-edge { stroke: transparent; }
.gpgpl-feature.is-light.is-selected .gpgpl-feature-edge { stroke: var(--gpgpl-gold); stroke-dasharray: 3 3; }
.gpgpl-light-reach {
	fill-opacity: 0.07;
	stroke: none;
	color: #6B5B2A;
	pointer-events: none;
}
.gpgpl-light-badge {
	fill: #2E3338;
	stroke: #FCF9F3;
	stroke-width: 1.5;
	pointer-events: none;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.gpgpl-light-bulb { pointer-events: none; }
.gpgpl-light-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
	cursor: grab;
}
.gpgpl-feature-festoon .gpgpl-feature-line { stroke: #3A3F44 !important; }
.gpgpl-feature-festoon .gpgpl-feature-edge { stroke: rgba(255, 255, 255, 0.6); }
.gpgpl-festoon-bulb {
	stroke: #3A3F44;
	stroke-width: 0.8;
	pointer-events: none;
}
.gpgpl-festoon-post {
	fill: #2E3338;
	stroke: #FCF9F3;
	stroke-width: 1;
	pointer-events: none;
}

/* The card: colour, brightness, height */
.gpgpl-light-options[hidden] { display: none; }
.gpgpl-light-options {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0.4rem 0 0.6rem;
}
.gpgpl-light-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.gpgpl-light-row .gpgpl-feature-size-label { min-width: 5.5rem; }
.gpgpl-light-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gpgpl-light-swatch {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 45%, #FCF9F3 0 18%, var(--gpgpl-light) 60%);
	box-shadow: 0 0 0 1.5px rgba(51, 41, 31, 0.18);
	cursor: pointer;
}
.gpgpl-light-swatch.is-active { box-shadow: 0 0 0 2.5px var(--gpgpl-leaf-dark); }
.gpgpl-light-swatch[disabled] { opacity: 0.5; cursor: default; }

/* Night view */
.gpgpl-night-btn .gpgpl-night-sun { display: none; }
.gpgpl-night-btn.is-on .gpgpl-night-sun { display: block; }
.gpgpl-night-btn.is-on .gpgpl-night-moon { display: none; }
.gpgpl-night-btn.is-on {
	background: #1B2A44;
	color: #FFD98A;
}
.gpgpl-night-btn.is-locked { position: relative; }
.gpgpl-night-btn.is-locked::after {
	content: "";
	position: absolute;
	top: -5px;
	right: -5px;
	width: 18px;
	height: 18px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 10V8a4 4 0 1 1 8 0v2h1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1zm2 0h4V8a2 2 0 1 0-4 0z'/%3E%3C/svg%3E") center / 11px no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.gpgpl-design-area.is-night.is-view-3d { background: #0B1626; }
.gpgpl-design-area.is-night.is-view-3d .gpgpl-3d-help { background: rgba(20, 32, 54, 0.85); }

/* The selected light shows its reach clearly */
.gpgpl-feature.is-light.is-selected .gpgpl-light-reach {
	fill-opacity: 0.2;
	stroke: currentColor;
	stroke-opacity: 0.35;
	stroke-dasharray: 4 4;
}
/* Narrow phones: "Plan" and "3D", so the night button fits on the dock */
@media (max-width: 440px) {
	.gpgpl-view-word { display: none; }
}

/* Lights above the plants on the plan, easy to tap (1.33.2) */
.gpgpl-light-tap .gpgpl-light-badge,
.gpgpl-light-tap .gpgpl-light-bulb { pointer-events: none; }
.gpgpl-light-tap-hit {
	fill: transparent;
	stroke: none;
	pointer-events: all;
	touch-action: none;
	cursor: grab;
}
.gpgpl-light-tap.is-selected .gpgpl-light-badge {
	stroke: var(--gpgpl-gold);
	stroke-width: 3;
}
.gpgpl-light-tap.is-locked .gpgpl-light-badge { opacity: 0.75; }
.gpgpl-design-area.is-feature-drawing .gpgpl-light-tap,
.gpgpl-design-area.is-shape-editing .gpgpl-light-tap { display: none; }

/* =====================================================================
   1.35: the new layout
   - the dock: Undo · Plan/3D · + · Garden (Scene in 3D) · More
   - sheets: Add (the +), Scene, More, and the ⋯ options
   - the selected item's tools docked along the bottom
   - one slim top row: design, scores, ⋯
   - getting started
   - darker controls at night
   ===================================================================== */

/* ---- The dock ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-dock {
	left: var(--gpgpl-pad-l);
	right: var(--gpgpl-pad-r);
	width: auto;
	max-width: 560px;
	margin: 0 auto;
	transform: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 2px;
	height: 66px;
	box-sizing: border-box;
	padding: 5px 6px;
	border-radius: 24px;
	background: var(--gpgpl-glass);
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.2);
}

.gpgpl-app .gpgpl-design-area.is-view-plan .gpgpl-dock .gpgpl-dock-3d,
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock .gpgpl-dock-plan {
	display: none;
}

.gpgpl-app .gpgpl-dock .gpgpl-dock-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: auto;
	min-width: 0;
	height: 56px;
	border-radius: 16px;
	background: transparent;
	box-shadow: none;
	color: var(--gpgpl-ink);
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-app .gpgpl-dock .gpgpl-dock-btn[aria-expanded="true"] {
	background: rgba(74, 106, 52, 0.14);
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-dock-label {
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
}

.gpgpl-app .gpgpl-design-area .gpgpl-dock .gpgpl-view-switch {
	justify-self: center;
	height: 44px;
	padding: 3px;
	border-radius: 14px;
	background: rgba(74, 106, 52, 0.12);
	box-shadow: none;
}

.gpgpl-app .gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
	padding: 0 0.6rem;
	font-size: 0.86rem;
	font-weight: 700;
}

.gpgpl-app .gpgpl-dock .gpgpl-view-btn svg,
.gpgpl-app .gpgpl-dock .gpgpl-view-word {
	display: none;
}

/* The big + */
.gpgpl-fab {
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-top: -30px;
	padding: 0;
	border: 4px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	box-shadow: 0 10px 24px rgba(74, 106, 52, 0.45);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform var(--gpgpl-dur) var(--gpgpl-ease), background var(--gpgpl-dur) ease;
}

.gpgpl-fab:hover {
	background: #4A6A34;
}

.gpgpl-fab:active {
	transform: scale(0.94);
}

.gpgpl-fab[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
	transform: rotate(45deg);
}

.gpgpl-fab:focus-visible {
	outline: 3px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

@media (max-width: 360px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		padding: 0 0.42rem;
		font-size: 0.8rem;
	}

	.gpgpl-fab {
		width: 58px;
		height: 58px;
	}
}

.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-dock {
	transform: translateY(12px);
}

/* ---- The selected item's tools, docked along the bottom ---- */
.gpgpl-app .gpgpl-action-bar.is-docked {
	top: auto;
	left: var(--gpgpl-pad-l);
	right: var(--gpgpl-pad-r);
	bottom: var(--gpgpl-pad-b);
	z-index: 24;
	max-width: 560px;
	margin: 0 auto;
	transform: none !important;
	flex-direction: column;
	gap: 0;
	padding: 6px 6px 5px;
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.32);
}

.gpgpl-action-bar.is-docked::after {
	display: none;
}

.gpgpl-design-area.has-selbar .gpgpl-dock {
	visibility: hidden;
}

.gpgpl-action-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 34px;
	padding: 0 2px 0 12px;
	color: #FCF9F3;
}

.gpgpl-action-title {
	min-width: 0;
	overflow: hidden;
	font-size: 0.86rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-action-sub {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 500;
}

.gpgpl-action-locked {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(224, 176, 74, 0.22);
	color: var(--gpgpl-gold);
	font-size: 0.7rem;
	font-weight: 700;
}

.gpgpl-action-done {
	flex: none;
	min-height: 36px;
	padding: 0 14px;
	border: none;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.12);
	color: var(--gpgpl-gold);
	font: 700 0.86rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-action-done:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

.gpgpl-action-btn.is-shop { color: var(--gpgpl-gold) !important; text-decoration: none !important; }

.gpgpl-action-row {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 2px;
}

.gpgpl-action-bar.is-docked .gpgpl-action-btn {
	min-width: 0;
	height: 52px;
	gap: 4px;
	font-size: 0.72rem;
}

.gpgpl-action-bar.is-docked .gpgpl-action-btn svg {
	width: 22px;
	height: 22px;
}

/* ---- One slim top row ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-view-bar {
	align-items: center;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-left {
	flex: 1 1 auto;
	min-width: 0;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-row {
	flex-wrap: nowrap;
}

.gpgpl-app .gpgpl-design-chip {
	flex: 0 1 auto;
	min-width: 0;
	min-height: 48px;
	border-radius: 16px;
}

/* The two scores as one badge */
.gpgpl-app .gpgpl-design-area .gpgpl-score-bar {
	flex: none;
	gap: 0;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	pointer-events: auto;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip {
	min-height: 48px;
	padding: 4px 9px 4px 5px;
	gap: 0.35rem;
	border-radius: 16px 0 0 16px;
	background: transparent;
	box-shadow: none;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-year {
	border-radius: 0 16px 16px 0;
	box-shadow: inset 1px 0 0 rgba(51, 41, 31, 0.1);
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-ring {
	width: 30px;
	height: 30px;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-ring > span {
	width: 24px;
	height: 24px;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-ring svg {
	width: 15px;
	height: 15px;
}

.gpgpl-score-of {
	font-size: 0.72rem;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip-label,
.gpgpl-app .gpgpl-score-bar .gpgpl-score-wild-level,
.gpgpl-app .gpgpl-score-bar .gpgpl-score-of-word {
	display: none;
}

@media (min-width: 760px) and (min-height: 521px) {
	.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip-label,
	.gpgpl-app .gpgpl-score-bar .gpgpl-score-wild-level,
	.gpgpl-app .gpgpl-score-bar .gpgpl-score-of-word {
		display: inline;
	}

	.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip-label {
		display: block;
	}
}

/* The ⋯ button and its options */
.gpgpl-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-menu-btn[aria-expanded="true"] {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-menu-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-app .gpgpl-pop.gpgpl-pop-menu {
	top: calc(var(--gpgpl-pad-t) + 56px);
	right: var(--gpgpl-pad-r);
	bottom: auto;
	left: auto;
	z-index: 30;
	display: block;
	width: 250px;
	padding: 8px;
	border-radius: 18px;
	background: #FCF9F3;
	box-shadow: 0 14px 36px rgba(51, 41, 31, 0.28);
	transform-origin: top right;
	transform: translateY(-6px) scale(0.97);
}

.gpgpl-app .gpgpl-pop.gpgpl-pop-menu.is-open {
	transform: none;
}

.gpgpl-menu-units {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 6px 8px 10px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--gpgpl-ink);
}

.gpgpl-app .gpgpl-pop-menu .gpgpl-units-switch {
	background: rgba(74, 106, 52, 0.12);
	box-shadow: none;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-menu .gpgpl-menu-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	height: auto;
	min-height: 48px;
	padding: 0 10px;
	border: none;
	border-radius: 12px;
	background: transparent;
	box-shadow: none;
	color: var(--gpgpl-ink);
	font: 600 0.95rem/1.2 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-menu .gpgpl-menu-row[hidden] {
	display: none;
}

.gpgpl-app .gpgpl-pop-menu .gpgpl-menu-row:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-app .gpgpl-pop-menu .gpgpl-menu-row svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--gpgpl-leaf);
}

.gpgpl-app .gpgpl-pop-menu .gpgpl-fullscreen-btn .gpgpl-fs-exit,
.gpgpl-app .gpgpl-pop-menu .gpgpl-fullscreen-btn.is-active .gpgpl-fs-enter {
	display: none;
}

.gpgpl-app .gpgpl-pop-menu .gpgpl-fullscreen-btn.is-active .gpgpl-fs-exit {
	display: block;
}

/* ---- Sheets: Add, Scene, More ---- */
.gpgpl-app .gpgpl-pop.gpgpl-sheet {
	z-index: 30;
	display: block;
	box-sizing: border-box;
	bottom: calc(var(--gpgpl-pad-b) + 66px + 0.75rem);
	width: min(480px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-pad-b) - 66px - 5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.9rem 1rem 1rem;
	border-radius: 22px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

/* Phones held upright: sheets slide up from the bottom */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-pop.gpgpl-sheet {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 80%;
		padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
		box-shadow: 0 -10px 30px rgba(51, 41, 31, 0.22);
		transform: translateY(30px);
	}

	.gpgpl-app .gpgpl-pop.gpgpl-sheet.is-open {
		transform: none;
	}

	.gpgpl-app .gpgpl-pop.gpgpl-sheet::before {
		content: "";
		display: block;
		width: 44px;
		height: 5px;
		margin: 0 auto 0.5rem;
		border-radius: 3px;
		background: rgba(51, 41, 31, 0.16);
	}

	.gpgpl-design-area.has-sheet .gpgpl-scrim {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.gpgpl-app .gpgpl-pop.gpgpl-pop-add {
		height: 80%;
	}
}

.gpgpl-sheet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.6rem;
}

.gpgpl-sheet-title {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-sheet-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(74, 106, 52, 0.12);
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-sheet-close:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* ---- Add sheet ---- */
.gpgpl-add-search {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	height: 48px;
	margin: 0 0 0.7rem;
	padding: 0 0.85rem;
	border: 1.5px solid rgba(74, 106, 52, 0.35);
	border-radius: 14px;
	background: #FAF6EE;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-add-search:focus-within {
	border-color: var(--gpgpl-leaf);
	background: #FCF9F3;
}

.gpgpl-app .gpgpl-add-search input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	font: 500 16px/1 var(--gpgpl-font-ui); /* 16px: no zoom on iPhone */
	color: var(--gpgpl-ink);
	outline: none;
}

.gpgpl-add-tabs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 6px;
	margin-bottom: 0.85rem;
}

.gpgpl-add-tab {
	min-height: 40px;
	padding: 0 4px;
	border: none;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.12);
	color: var(--gpgpl-ink);
	font: 700 0.84rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-add-tab[hidden] {
	display: none;
}

.gpgpl-add-tab[aria-selected="true"] {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-add-tab:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-pop-add.is-searching .gpgpl-add-tabs {
	opacity: 0.45;
}

.gpgpl-pop-add.is-searching .gpgpl-add-tab[aria-selected="true"] {
	background: rgba(74, 106, 52, 0.12);
	color: var(--gpgpl-ink);
}

.gpgpl-add-pane[hidden] {
	display: none;
}

.gpgpl-add-pane-title {
	display: none;
	margin: 0.6rem 0 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-pop-add.is-searching .gpgpl-add-pane-title {
	display: block;
}

.gpgpl-add-find-plant {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 52px;
	margin-bottom: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: none;
	border-radius: 14px;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
	font: 500 0.92rem/1.25 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-add-find-plant[hidden] {
	display: none;
}

.gpgpl-add-find-plant span {
	flex: 1;
	min-width: 0;
}

.gpgpl-add-none,
.gpgpl-add-note {
	margin: 0.6rem 0.2rem 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-add-none[hidden] {
	display: none;
}

/* The menus, laid out flat in the sheet */
.gpgpl-app .gpgpl-pop-add .gpgpl-add-menu,
.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu {
	position: static;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	opacity: 1;
	visibility: inherit;
	transform: none;
	transition: none;
}

.gpgpl-pop-add .gpgpl-add-menu-sep {
	display: none;
}

.gpgpl-app .gpgpl-pop-add .is-filtered,
.gpgpl-app .gpgpl-pop-add .gpgpl-add-menu-item[hidden],
.gpgpl-app .gpgpl-pop-add .gpgpl-model-tile[hidden] {
	display: none !important;
}

/* Plants: three big rows */
.gpgpl-app .gpgpl-pop-add .gpgpl-plants-menu {
	display: grid;
	gap: 8px;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-plants-menu .gpgpl-add-menu-item {
	min-height: 60px;
	padding: 0.6rem 0.9rem;
	border: 1.5px solid rgba(74, 106, 52, 0.18);
	border-radius: 16px;
	background: #FAF6EE;
	font-size: 0.98rem;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-plants-menu .gpgpl-add-menu-item svg {
	box-sizing: content-box;
	width: 22px;
	height: 22px;
	padding: 8px;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.14);
}

.gpgpl-app .gpgpl-pop-add .gpgpl-plants-menu .gpgpl-add-menu-finder {
	border-color: transparent;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-plants-menu .gpgpl-add-menu-finder svg {
	background: rgba(224, 176, 74, 0.18);
	color: var(--gpgpl-gold);
}

/* Features, lights and furniture: tiles */
.gpgpl-app .gpgpl-pop-add .gpgpl-build-menu,
.gpgpl-light-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-build-menu > .gpgpl-add-menu-item,
.gpgpl-app .gpgpl-pop-add .gpgpl-light-item {
	position: relative;
	flex-direction: column;
	justify-content: center;
	gap: 0.4rem;
	min-width: 0;
	min-height: 88px;
	padding: 0.6rem 0.35rem;
	border: 1.5px solid #EADFD5;
	border-radius: 16px;
	background: #FBF7F3;
	font-size: 0.84rem;
	line-height: 1.2;
	text-align: center;
	white-space: normal;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-build-menu > .gpgpl-add-menu-item:hover,
.gpgpl-app .gpgpl-pop-add .gpgpl-light-item:hover {
	border-color: #C9A98E;
	background: #F5EDE6;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-build-menu > .gpgpl-add-menu-item svg,
.gpgpl-app .gpgpl-pop-add .gpgpl-light-item svg {
	width: 30px;
	height: 30px;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-light-item .gpgpl-light-lock {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 14px;
	height: 14px;
	color: #B7791F;
}

.gpgpl-app .gpgpl-pop-add .gpgpl-build-menu.is-shape-step {
	display: block;
	min-width: 0;
}

.gpgpl-pop-add .gpgpl-shape-step,
.gpgpl-pop-add .gpgpl-model-step {
	grid-column: 1 / -1;
	min-width: 0;
}

.gpgpl-pop-add .gpgpl-model-step.is-in-pane .gpgpl-shape-step-head {
	display: none;
}

.gpgpl-pop-add .gpgpl-model-step.is-in-pane .gpgpl-model-tiles {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gpgpl-pop-add .gpgpl-model-group {
	margin-top: 0.4rem;
}

.gpgpl-add-tab.is-locked::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 5px;
	vertical-align: 2px;
	border-radius: 50%;
	background: var(--gpgpl-gold);
}

/* ---- Scene sheet ---- */
.gpgpl-app .gpgpl-pop-scene .gpgpl-daynight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 100%;
	height: auto;
	margin: 0 0 1rem;
	padding: 4px;
	border: none;
	border-radius: 16px;
	background: rgba(74, 106, 52, 0.12);
	box-shadow: none;
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-daynight svg {
	display: none;
}

.gpgpl-daynight-day,
.gpgpl-daynight-night {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 44px;
	border-radius: 12px;
	font: 700 0.95rem/1 var(--gpgpl-font-ui);
}

.gpgpl-daynight[aria-pressed="false"] .gpgpl-daynight-day,
.gpgpl-daynight[aria-pressed="true"] .gpgpl-daynight-night {
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
}

.gpgpl-daynight.is-locked .gpgpl-daynight-night::after {
	content: "Premium";
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--gpgpl-gold);
	color: var(--gpgpl-leaf-dark);
	font-size: 0.66rem;
}

.gpgpl-daynight:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-scene-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 0.75rem;
}

.gpgpl-scene-row .gpgpl-pop-label {
	flex: none;
	width: 4.2em;
	font-size: 0.86rem;
	color: var(--gpgpl-ink);
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-3d-month-value,
.gpgpl-app .gpgpl-pop-scene .gpgpl-3d-growth-value {
	min-width: 5.4em;
}

.gpgpl-scene-month.is-locked > :not(.gpgpl-pop-label):not(.gpgpl-scene-lock) {
	display: none;
}

.gpgpl-scene-lock {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	flex: 1;
	min-height: 44px;
	padding: 0 0.85rem;
	border: none;
	border-radius: 12px;
	background: #FFF4E1;
	color: #7A4B0B;
	font: 700 0.86rem/1.2 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

/* ---- More sheet ---- */
.gpgpl-more-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gpgpl-app .gpgpl-pop-more .gpgpl-more-row,
.gpgpl-app .gpgpl-pop-explore .gpgpl-more-row,
.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu-item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	width: 100%;
	height: auto;
	min-height: 56px;
	padding: 0.35rem 0.6rem;
	border: none;
	border-radius: 14px;
	background: transparent;
	box-shadow: none;
	color: var(--gpgpl-ink);
	font: 600 0.98rem/1.25 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu-item[hidden] {
	display: none;
}

.gpgpl-app .gpgpl-pop-more .gpgpl-more-row:hover,
.gpgpl-app .gpgpl-pop-explore .gpgpl-more-row:hover,
.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu-item:hover {
	background: var(--gpgpl-paper);
}

.gpgpl-app .gpgpl-pop-more .gpgpl-more-row > svg,
.gpgpl-app .gpgpl-pop-explore .gpgpl-more-row > svg,
.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu-item > svg {
	box-sizing: content-box;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 9px;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.12);
	color: var(--gpgpl-leaf);
}

.gpgpl-app .gpgpl-pop-more .gpgpl-names-btn[aria-pressed="true"] .gpgpl-names-icon-off,
.gpgpl-app .gpgpl-pop-more .gpgpl-names-btn[aria-pressed="false"] .gpgpl-names-icon-on {
	display: none;
}

.gpgpl-more-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpgpl-more-text small {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-more-download.is-locked small::after {
	content: " · Premium";
	color: #B7791F;
	font-weight: 700;
}

.gpgpl-more-heading {
	margin: 0.8rem 0.6rem 0.2rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-design-area.is-view-3d .gpgpl-more-plan {
	display: none !important;
}

.gpgpl-app .gpgpl-pop-more .gpgpl-add-menu-item[disabled],
.gpgpl-app .gpgpl-pop-explore .gpgpl-more-row[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---- Explore sheet (3D: the eye beside the +) ---- */
.gpgpl-explore-intro {
	margin: 0 0.6rem 0.2rem;
	font-size: 0.86rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-more-row[hidden],
.gpgpl-view-chips[hidden] {
	display: none;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-explore-delete {
	min-height: 46px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-explore-delete > svg {
	background: rgba(179, 45, 46, 0.1);
	color: #B32D2E;
}

.gpgpl-view-chips {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0.6rem 0.5rem;
}

.gpgpl-view-chips-label {
	flex: none;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-view-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gpgpl-view-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	height: 36px;
	padding: 0 0.75rem 0 0.55rem;
	border: none;
	border-radius: 18px;
	background: #2F6F8F;
	color: #FCF9F3;
	font: 700 0.9rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-view-chip svg {
	width: 18px;
	height: 18px;
}

.gpgpl-view-chip:hover {
	background: #255C77;
}

.gpgpl-view-chip:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* The dock in 3D has one more button (Explore) */
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock {
	grid-template-columns: minmax(36px, 1fr) auto 70px repeat(3, minmax(36px, 1fr));
}

@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock {
		grid-template-columns: minmax(32px, 1fr) auto 58px repeat(3, minmax(32px, 1fr));
		gap: 0;
	}

	.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock .gpgpl-dock-label {
		font-size: 0.62rem;
	}
}

/* ---- Getting started ---- */
.gpgpl-checklist {
	position: absolute;
	top: var(--gpgpl-cl-top, 70px);
	left: var(--gpgpl-pad-l);
	z-index: 21;
	display: flex;
	align-items: flex-start;
	gap: 6px;
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r));
}

.gpgpl-checklist[hidden] {
	display: none;
}

.gpgpl-design-area.is-touring .gpgpl-checklist,
.gpgpl-design-area.is-shape-editing .gpgpl-checklist,
.gpgpl-design-area.is-feature-drawing .gpgpl-checklist,
.gpgpl-design-area.is-walking .gpgpl-checklist,
.gpgpl-design-area.has-selbar .gpgpl-checklist:not(.is-open),
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-checklist {
	visibility: hidden;
}

.gpgpl-cl-pill {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	height: 44px;
	padding: 0 0.9rem 0 5px;
	border: none;
	border-radius: 22px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	text-align: left;
	cursor: pointer;
}

.gpgpl-cl-count {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font: 700 0.72rem/1 var(--gpgpl-font-ui);
}

.gpgpl-cl-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.15;
}

.gpgpl-cl-kicker {
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-cl-next {
	overflow: hidden;
	font-size: 0.84rem;
	font-weight: 600;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-cl-close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-cl-card {
	width: min(360px, calc(100vw - 2rem));
	box-sizing: border-box;
	padding: 0.6rem 0.75rem 0.5rem 1rem;
	border-radius: 18px;
	background: #FCF9F3;
	box-shadow: 0 12px 32px rgba(51, 41, 31, 0.22);
	color: var(--gpgpl-ink);
}

.gpgpl-cl-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.gpgpl-cl-head strong {
	font-family: var(--gpgpl-font-display);
	font-size: 1rem;
}

.gpgpl-cl-of {
	flex: 1;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-cl-hide {
	min-height: 44px;
	padding: 0 0.5rem;
	border: none;
	background: transparent;
	color: var(--gpgpl-leaf-dark);
	font: 700 0.86rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-cl-steps {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpgpl-cl-step {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	min-height: 48px;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--gpgpl-ink);
	font: 600 0.92rem/1.25 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-cl-step > svg {
	flex: none;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-cl-dot {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px #7A6A58;
	color: transparent;
}

.gpgpl-cl-step.is-done .gpgpl-cl-dot {
	background: var(--gpgpl-leaf);
	box-shadow: none;
	color: #FCF9F3;
}

.gpgpl-cl-label {
	flex: 1;
	min-width: 0;
}

.gpgpl-cl-step.is-done .gpgpl-cl-label {
	color: var(--gpgpl-ink-soft);
	text-decoration: line-through;
}

.gpgpl-cl-pill:focus-visible,
.gpgpl-cl-close:focus-visible,
.gpgpl-cl-hide:focus-visible,
.gpgpl-cl-step:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- At night (3D): darker controls, so the lit garden stands out ---- */
.gpgpl-design-area.is-view-3d.is-night .gpgpl-view-bar,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-dock,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-checklist,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-scene {
	--gpgpl-glass: rgba(18, 30, 48, 0.86);
	--gpgpl-ink: #E8EEF7;
	--gpgpl-ink-soft: #A9B9CC;
	--gpgpl-float-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-scene {
	background: #16233A;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-fab {
	border-color: #16233A;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-score-ring > span {
	background: #1C2B44;
	color: #E8EEF7;
}

.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-dock .gpgpl-view-switch,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-scene .gpgpl-daynight {
	background: rgba(255, 255, 255, 0.1);
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-view-btn.is-active,
.gpgpl-design-area.is-view-3d.is-night .gpgpl-daynight[aria-pressed="true"] .gpgpl-daynight-night {
	background: #E8EEF7;
	color: #16233A;
}

.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-dock .gpgpl-dock-btn[aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.14);
	color: #FCF9F3;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-score-bar .gpgpl-score-chip.is-year {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-fab,
	.gpgpl-app .gpgpl-pop.gpgpl-sheet {
		transition: none;
	}
}

.gpgpl-action-head .gpgpl-action-title {
	flex: 1;
}

.gpgpl-action-undo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: #FCF9F3;
	cursor: pointer;
}

.gpgpl-action-undo[disabled] {
	opacity: 0.35;
	cursor: default;
}

.gpgpl-action-undo:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

/* Closing sheets and the scrim fade out: taps go straight through them
   (a quick tap on the plan right after choosing something mustn't land
   on a sheet that's still fading) */
.gpgpl-app .gpgpl-pop:not(.is-open),
.gpgpl-design-area:not(.has-panel):not(.has-sheet) .gpgpl-scrim {
	pointer-events: none;
}

/* The plant key sits clear of the dock and its big + */
.gpgpl-app .gpgpl-plant-key {
	bottom: calc(var(--gpgpl-pad-b) + 66px + 30px + 0.4rem);
}

@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-app .gpgpl-plant-key {
		bottom: auto;
		max-height: calc(100% - var(--gpgpl-key-top, 7rem) - var(--gpgpl-pad-b) - 66px - 30px - 0.5rem);
	}
}

/* ---- Fitting small phones ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-dock {
	grid-template-columns: minmax(40px, 1fr) auto 70px minmax(40px, 1fr) minmax(40px, 1fr);
}

.gpgpl-app .gpgpl-design-chip {
	flex: 1 1 auto;
	max-width: 260px;
	overflow: hidden;
}

.gpgpl-app .gpgpl-design-chip-text {
	min-width: 0;
	overflow: hidden;
}

.gpgpl-app .gpgpl-design-chip-name,
.gpgpl-app .gpgpl-design-chip-status {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-chip-icon {
		display: none;
	}

	.gpgpl-app .gpgpl-design-chip {
		padding-left: 0.7rem;
	}

	.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip {
		padding: 4px 7px 4px 4px;
		gap: 0.25rem;
	}

	.gpgpl-app .gpgpl-score-bar .gpgpl-score-ring {
		width: 26px;
		height: 26px;
	}

	.gpgpl-app .gpgpl-score-bar .gpgpl-score-ring > span {
		width: 21px;
		height: 21px;
	}

	.gpgpl-app .gpgpl-design-area .gpgpl-dock {
		grid-template-columns: minmax(36px, 1fr) auto 62px minmax(36px, 1fr) minmax(36px, 1fr);
		padding: 5px 4px;
	}

	.gpgpl-app .gpgpl-design-area .gpgpl-dock .gpgpl-view-btn {
		padding: 0 0.4rem;
		font-size: 0.8rem;
	}

	.gpgpl-fab {
		width: 58px;
		height: 58px;
	}
}

/* Phones on their side: sheets run down the right-hand side */
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-app .gpgpl-pop.gpgpl-sheet {
		top: var(--gpgpl-pad-t);
		bottom: var(--gpgpl-pad-b);
		right: var(--gpgpl-pad-r);
		left: auto;
		width: min(400px, 56%);
		max-height: none;
		transform: translateX(16px);
	}

	.gpgpl-app .gpgpl-pop.gpgpl-sheet.is-open {
		transform: none;
	}

	.gpgpl-app .gpgpl-pop.gpgpl-pop-scene {
		top: auto;
	}

	.gpgpl-design-area.has-sheet .gpgpl-scrim {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
		background: rgba(51, 41, 31, 0.16);
	}
}

/* Scene's Day / Night: "Premium" is written on it, no corner padlock */
.gpgpl-app .gpgpl-daynight.is-locked::before,
.gpgpl-app .gpgpl-daynight.is-locked::after {
	display: none;
}

/* =====================================================================
   1.35.2: the scores sit under the design name (not beside it, where a
   long name pushed them under ⋯), with the garden badge and this
   month's jobs
   ===================================================================== */
.gpgpl-app .gpgpl-design-area .gpgpl-view-bar {
	align-items: flex-start;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-left {
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-row {
	max-width: 100%;
}

.gpgpl-app .gpgpl-design-area .gpgpl-score-bar {
	max-width: 100%;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip + .gpgpl-score-chip {
	border-radius: 0;
	box-shadow: inset 1px 0 0 rgba(51, 41, 31, 0.1);
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip:last-child {
	border-radius: 0 16px 16px 0;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-medal,
.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-jobs {
	padding-left: 7px;
}

/* The badge: a little medal in the badge's colour */
.gpgpl-score-medal-mini {
	--medal: #9CAF7B;
	--medal-edge: #4A6A34;
	--ribbon: #4A6A34;
	display: inline-flex;
	flex: none;
}

.gpgpl-score-chip.is-bronze .gpgpl-score-medal-mini { --medal: #D9A06B; --medal-edge: #9A6232; --ribbon: #B5542A; }
.gpgpl-score-chip.is-silver .gpgpl-score-medal-mini { --medal: #E2D6C2; --medal-edge: #7A6A58; --ribbon: #5F5040; }
.gpgpl-score-chip.is-gold .gpgpl-score-medal-mini { --medal: #FFC85C; --medal-edge: #C98F1C; --ribbon: #D9822B; }

.gpgpl-medal-ribbon { fill: var(--ribbon); }
.gpgpl-medal-disc { fill: var(--medal); stroke: var(--medal-edge); stroke-width: 1.6; }
.gpgpl-medal-star { fill: #FCF9F3; }
.gpgpl-score-chip.is-seedling .gpgpl-medal-star { fill: #4A6A34; opacity: 0.55; }

/* Jobs: a clipboard; gold dot while some are still to do, green when all done */
.gpgpl-score-jobs-ico {
	position: relative;
	display: inline-flex;
	flex: none;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-score-chip.is-jobs.has-todo .gpgpl-score-jobs-ico::after {
	content: "";
	position: absolute;
	top: -2px;
	right: -3px;
	width: 8px;
	height: 8px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-gold);
}

.gpgpl-score-chip.is-jobs.is-done .gpgpl-score-jobs-ico {
	color: var(--gpgpl-leaf);
}

.gpgpl-score-jobs-of {
	font-size: 0.72rem;
}

/* On phones the badge is just its medal (its name is in the panel) */
.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-medal .gpgpl-score-chip-text {
	display: none;
}

@media (min-width: 760px) and (min-height: 521px) {
	.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-medal .gpgpl-score-chip-text {
		display: flex;
	}
}

/* Phones on their side: name and scores share one row, to save height */
@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-view-left {
		flex-direction: row;
		align-items: center;
	}
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-score-bar .gpgpl-score-chip + .gpgpl-score-chip {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14);
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-score-jobs-ico {
	color: #E8EEF7;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-score-chip.is-jobs.has-todo .gpgpl-score-jobs-ico::after {
	border-color: #1C2B44;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-medal {
	min-width: 46px;
	justify-content: center;
}

/* Tips appear just under the design name and scores */
.gpgpl-app .gpgpl-toast {
	top: var(--gpgpl-cl-top, calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 3.2rem));
}

/* =====================================================================
   1.36: tap feedback, and plants kept pruned smaller
   ===================================================================== */

/* The ripple drawn over a tapped button (garden-planner-shell.js) */
.gpgpl-tap-ripple {
	position: fixed;
	z-index: 2147483000;
	overflow: hidden;
	pointer-events: none;
}

.gpgpl-tap-ripple > span {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
}

/* A pruned plant on the plan: a dashed inner ring */
.gpgpl-plant-token.is-pruned::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1.5px dashed rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	pointer-events: none;
}

/* The plant card's "Kept pruned to" slider */
.gpgpl-prune {
	margin: 0.6rem 0 0.2rem;
	padding: 0.7rem 0.8rem 0.6rem;
	border-radius: 14px;
	background: rgba(74, 106, 52, 0.08);
}

.gpgpl-prune-label {
	display: block;
	cursor: pointer;
}

.gpgpl-prune-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-prune-value {
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
}

.gpgpl-selected-panel.is-pruned .gpgpl-prune-value {
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-prune-range {
	display: block;
	width: 100%;
	height: 32px;
	margin: 0.25rem 0 0;
	accent-color: var(--gpgpl-leaf);
}

.gpgpl-prune-range:disabled {
	opacity: 0.45;
}

.gpgpl-prune-note {
	margin: 0.15rem 0 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

/* =====================================================================
   1.37: live weather for the garden (garden-planner-weather.js)
   ===================================================================== */

/* The chip beside the design name */
.gpgpl-weather-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	flex: none;
	min-width: 48px;
	height: 48px;
	padding: 0 10px 0 7px;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	font: 700 0.98rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
	pointer-events: auto;
}

.gpgpl-weather-chip[hidden] {
	display: none;
}

.gpgpl-weather-chip.is-empty,
.gpgpl-weather-chip.is-locked {
	padding: 0 8px;
}

.gpgpl-weather-ico {
	display: inline-flex;
}

.gpgpl-weather-temp {
	display: inline-flex;
	align-items: center;
}

.gpgpl-weather-temp:empty {
	display: none;
}

.gpgpl-weather-chip.is-locked .gpgpl-weather-temp {
	color: #B7791F;
}

/* "Add a location": a small + on the cloud */
.gpgpl-weather-chip.is-empty::after {
	content: "+";
	position: absolute;
	right: 5px;
	bottom: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font: 800 12px/1 var(--gpgpl-font-ui);
}

/* Something to act on: a gold dot (blue for frost) */
.gpgpl-weather-chip.is-alert::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 7px;
	width: 9px;
	height: 9px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-gold);
}

.gpgpl-weather-chip.is-alert.is-frost::after {
	background: #4F88AB;
}

.gpgpl-weather-chip:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-weather-chip.is-alert::after {
	border-color: #1C2B44;
}

/* The panel */
.gpgpl-weather-body {
	padding-bottom: 1.2rem;
}

.gpgpl-wx-place {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.8rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-place > span {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-wx-place svg {
	flex: none;
	color: var(--gpgpl-leaf);
}

.gpgpl-wx-link {
	flex: none;
	min-height: 36px;
	padding: 0 0.3rem;
	border: none;
	background: transparent;
	color: var(--gpgpl-leaf-dark);
	font: 700 0.86rem/1.2 var(--gpgpl-font-ui);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.gpgpl-wx-hint {
	margin: 0 0 0.8rem;
	padding: 0.6rem 0.8rem;
	border-radius: 12px;
	background: #FFF4E1;
	color: #7A4B0B;
	font-size: 0.84rem;
	line-height: 1.4;
}

.gpgpl-wx-advice {
	display: grid;
	gap: 8px;
	margin-bottom: 1rem;
}

.gpgpl-wx-card {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.75rem 0.85rem;
	border-radius: 14px;
	background: #FAF6EE;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-card > svg {
	flex: none;
	margin-top: 1px;
}

.gpgpl-wx-card b {
	display: block;
	font-size: 0.95rem;
	line-height: 1.3;
}

.gpgpl-wx-card p {
	margin: 0.2rem 0 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-card .gpgpl-wx-link {
	margin-top: 0.15rem;
	padding-left: 0;
}

.gpgpl-wx-card.is-frost,
.gpgpl-wx-card.is-frost-maybe {
	background: #EAF3FA;
}

.gpgpl-wx-card.is-heat {
	background: #FDEEEA;
}

.gpgpl-wx-card.is-wind,
.gpgpl-wx-card.is-heavy-rain {
	background: #F2EADC;
}

.gpgpl-wx-card.is-urgent {
	box-shadow: inset 4px 0 0 var(--gpgpl-gold);
}

.gpgpl-wx-card.is-frost.is-urgent {
	box-shadow: inset 4px 0 0 #4F88AB;
}

.gpgpl-wx-h {
	margin: 0.4rem 0 0.5rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-now {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.4rem 0.8rem;
	margin-bottom: 1rem;
}

.gpgpl-wx-now-main b {
	display: block;
	font-family: var(--gpgpl-font-display);
	font-size: 2rem;
	line-height: 1;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-now-main span {
	font-size: 0.9rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-now-facts {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
}

.gpgpl-wx-now-facts div {
	padding: 0.5rem 0.7rem;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.08);
}

.gpgpl-wx-now-facts dt {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-now-facts dd {
	margin: 0.1rem 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-week {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	margin: 0 0 0.6rem;
	padding: 0;
	list-style: none;
}

.gpgpl-wx-week li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 0.5rem 0.1rem;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.06);
	font-size: 0.78rem;
	color: var(--gpgpl-ink);
	text-align: center;
}

.gpgpl-wx-week li.is-frost {
	background: #EAF3FA;
}

.gpgpl-wx-day {
	font-weight: 700;
}

.gpgpl-wx-hi {
	font-weight: 700;
}

.gpgpl-wx-lo {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-lo i {
	display: inline-flex;
	font-style: normal;
}

.gpgpl-wx-mm {
	min-height: 1em;
	font-size: 0.68rem;
	color: #2F6F94;
}

.gpgpl-wx-note {
	margin: 0.4rem 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-note.is-error {
	color: var(--gpgpl-clay-dark);
}

.gpgpl-wx-credit {
	margin: 0.8rem 0 0;
	font-size: 0.74rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-credit a {
	color: inherit;
}

/* Finding the place */
.gpgpl-wx-intro {
	margin: 0 0 0.8rem;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-locate {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 48px;
	margin-bottom: 1rem;
}

.gpgpl-wx-label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.84rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-row {
	display: flex;
	gap: 6px;
}

.gpgpl-app .gpgpl-wx-search {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 0.85rem;
	border: 1.5px solid rgba(74, 106, 52, 0.35);
	border-radius: 12px;
	background: #FAF6EE;
	font: 500 16px/1 var(--gpgpl-font-ui); /* no zoom on iPhone */
	color: var(--gpgpl-ink);
}

.gpgpl-wx-row .gpgpl-btn {
	min-height: 48px;
}

.gpgpl-wx-results {
	display: grid;
	gap: 4px;
	margin: 0.6rem 0;
	padding: 0;
	list-style: none;
}

.gpgpl-wx-result {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 52px;
	padding: 0.4rem 0.7rem;
	border: none;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.08);
	color: var(--gpgpl-ink);
	text-align: left;
	cursor: pointer;
}

.gpgpl-wx-result svg {
	flex: none;
	color: var(--gpgpl-leaf);
}

.gpgpl-wx-result span {
	display: flex;
	flex-direction: column;
}

.gpgpl-wx-result small {
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-privacy {
	margin: 1rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--gpgpl-ink-soft);
}

/* Garden weather: frost and wind alerts on this device */
.gpgpl-wx-alerts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 0.75rem;
	margin: 0 0 1rem;
	padding: 0.75rem 0.85rem;
	border: 1.5px solid rgba(74, 106, 52, 0.25);
	border-radius: 14px;
	background: #FCF9F3;
}

.gpgpl-wx-alerts > svg {
	flex: none;
}

.gpgpl-wx-alerts-text {
	display: flex;
	flex: 1 1 180px;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	color: var(--gpgpl-ink);
}

.gpgpl-wx-alerts-text b {
	font-size: 0.95rem;
}

.gpgpl-wx-alerts-text small {
	font-size: 0.82rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-wx-alerts .gpgpl-btn {
	flex: none;
	min-height: 44px;
	margin-left: auto;
}

/* ---- 1.39: weather alerts in My designs ---- */

.gpgpl-acc-wx-bell {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	border: none;
	border-left: 1px solid var(--gpgpl-border);
	background: none;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.gpgpl-acc-wx-bell:hover {
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
}

.gpgpl-acc-wx-bell.is-on {
	background: rgba(74, 106, 52, 0.1);
	color: var(--gpgpl-leaf);
}

.gpgpl-acc-wx-bell.is-noplace {
	color: var(--gpgpl-border);
}

.gpgpl-acc-wx-bell:disabled {
	opacity: 0.5;
	cursor: progress;
}

.gpgpl-acc-wx-bell:focus-visible {
	outline: 2px solid var(--gpgpl-leaf);
	outline-offset: -3px;
}

.gpgpl-acc-item-text .gpgpl-acc-wx-line {
	overflow: hidden;
	font-size: 0.72rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.gpgpl-acc-item-text .gpgpl-acc-wx-line.is-on {
	color: var(--gpgpl-leaf);
	font-weight: 600;
}

.gpgpl-wx-alerts.is-designs {
	margin: 0 0 0.4rem;
	padding: 0.65rem 0.75rem;
}

.gpgpl-wx-alerts.is-designs .gpgpl-wx-alerts-text b {
	font-size: 0.9rem;
}

.gpgpl-acc-wx-hint {
	margin: 0 0 0.9rem;
}

.gpgpl-wx-link {
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: var(--gpgpl-leaf);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.gpgpl-wx-last-label {
	display: block;
	margin: 1rem 0 0.4rem;
}

.gpgpl-wx-result.gpgpl-wx-last {
	width: 100%;
}

/* ---- 1.41.1: alerts dropped by the phone ---- */
.gpgpl-wx-lost {
	position: absolute;
	top: calc(var(--gpgpl-pad-t, 12px) + 118px);
	left: 50%;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: min(440px, calc(100% - 24px));
	padding: 0.7rem 0.8rem;
	border-radius: 16px;
	background: #FCF9F3;
	box-shadow: 0 8px 28px rgba(51, 41, 31, 0.22);
	color: var(--gpgpl-ink);
	transform: translateX(-50%);
	animation: gpgpl-wx-lost-in 0.25s ease-out;
}
.gpgpl-wx-lost > svg { flex: none; color: var(--gpgpl-leaf); }
.gpgpl-wx-lost > span { display: flex; flex: 1; flex-direction: column; gap: 0.1rem; min-width: 0; }
.gpgpl-wx-lost b { font-size: 0.9rem; }
.gpgpl-wx-lost small { font-size: 0.78rem; line-height: 1.35; color: var(--gpgpl-ink-soft); }
.gpgpl-wx-lost .gpgpl-btn { flex: none; min-height: 40px; }
.gpgpl-wx-lost-close { flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: none; font-size: 1.3rem; line-height: 1; color: var(--gpgpl-ink-soft); cursor: pointer; }
@keyframes gpgpl-wx-lost-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .gpgpl-wx-lost { animation: none; } }

/* ==========================================================================
   Find your garden on a map (garden-planner-mapshape.js, with GP Terrain)
   ========================================================================== */

/* The Garden sheet's way in */
.gpgpl-gs-map {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	width: 100%;
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.85rem;
	border: 2px solid var(--gpgpl-leaf);
	border-radius: 16px;
	background: rgba(74, 106, 52, 0.08);
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.gpgpl-gs-map:hover {
	background: rgba(74, 106, 52, 0.14);
}

.gpgpl-gs-map:focus-visible {
	outline: 3px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-gs-map > svg {
	flex: none;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-gs-map-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gpgpl-gs-map-text strong {
	font-size: 1rem;
}

.gpgpl-gs-map-text small {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-gs-ground {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin: -0.25rem 0 0.75rem;
	padding: 0.4rem 0.4rem 0.4rem 0.75rem;
	border-radius: 12px;
	background: var(--gpgpl-paper, #F6F3EA);
	font-size: 0.84rem;
}

.gpgpl-gs-ground[hidden] {
	display: none;
}

/* Small print: where the ground heights came from */
.gpgpl-ground-credit {
	position: absolute;
	left: var(--gpgpl-pad-l, 12px);
	bottom: calc(var(--gpgpl-pad-b, 12px) + 124px); /* clear of the dock and the 3D help */
	z-index: 5;
	max-width: 60%;
	margin: 0;
	padding: 1px 6px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.7);
	color: #5F5040;
	font-size: 10px;
	line-height: 1.3;
	pointer-events: none;
}

.gpgpl-ground-credit[hidden],
.gpgpl-design-area.is-walking .gpgpl-ground-credit {
	display: none;
}

/* The map screen */
.gpgpl-mapper {
	position: absolute;
	inset: 0;
	z-index: 60;
	background: #E2D6C2;
	font-family: var(--gpgpl-font-ui);
}

.gpgpl-mapper[hidden] {
	display: none;
}

.gpgpl-mapper-map {
	position: absolute;
	inset: 0;
}

.gpgpl-mapper .leaflet-top.leaflet-right {
	top: 64px;
}

.gpgpl-mapper.is-drawing .gpgpl-mapper-map {
	cursor: crosshair;
}

.gpgpl-mapper-top {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	z-index: 1000;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	pointer-events: none;
}

.gpgpl-mapper-top > * {
	pointer-events: auto;
}

.gpgpl-mapper-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	box-shadow: 0 4px 14px rgba(51, 41, 31, 0.2);
	cursor: pointer;
}

.gpgpl-mapper-search {
	flex: 1 1 220px;
	display: flex;
	gap: 6px;
	max-width: 520px;
	padding: 4px;
	border-radius: 14px;
	background: #FCF9F3;
	box-shadow: 0 4px 14px rgba(51, 41, 31, 0.2);
}

.gpgpl-mapper-search[hidden] {
	display: none;
}

.gpgpl-mapper-q {
	flex: 1;
	min-width: 0;
	height: 36px;
	padding: 0 10px;
	border: none;
	border-radius: 10px;
	background: transparent;
	font: inherit;
	font-size: 16px; /* no zooming in on iPhones */
}

.gpgpl-mapper-q:focus {
	outline: 2px solid var(--gpgpl-leaf);
}

.gpgpl-mapper-results {
	flex-basis: 100%;
	max-width: 572px;
	max-height: 40vh;
	margin: 0;
	padding: 4px;
	overflow: auto;
	border-radius: 14px;
	background: #FCF9F3;
	box-shadow: 0 8px 24px rgba(51, 41, 31, 0.22);
	list-style: none;
}

.gpgpl-mapper-results[hidden] {
	display: none;
}

.gpgpl-mapper-results button {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-radius: 10px;
	background: none;
	font: inherit;
	font-size: 0.92rem;
	text-align: left;
	cursor: pointer;
}

.gpgpl-mapper-results button:hover,
.gpgpl-mapper-results button:focus-visible {
	background: rgba(74, 106, 52, 0.12);
}

.gpgpl-mapper-card {
	position: absolute;
	left: 50%;
	bottom: 12px;
	z-index: 1000;
	width: min(520px, calc(100% - 24px));
	max-height: 58%;
	overflow: auto;
	padding: 12px 16px 10px;
	border-radius: 20px;
	background: #FCF9F3;
	box-shadow: 0 10px 30px rgba(51, 41, 31, 0.25);
	transform: translateX(-50%);
	box-sizing: border-box;
}

.gpgpl-mapper-steps {
	display: flex;
	gap: 4px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	counter-reset: gpgpl-step;
}

.gpgpl-mapper-steps li {
	flex: 1;
	padding-top: 6px;
	border-top: 4px solid #E2D6C2;
	color: #7A6A58;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	counter-increment: gpgpl-step;
}

.gpgpl-mapper-steps li::before {
	content: counter(gpgpl-step) ". ";
}

.gpgpl-mapper-steps li.is-done {
	border-color: var(--gpgpl-leaf);
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-mapper-steps li.is-current {
	border-color: var(--gpgpl-leaf-dark);
	color: var(--gpgpl-ink);
}

.gpgpl-mapper-title {
	margin: 0 0 4px;
	font-size: 1.15rem;
	line-height: 1.2;
}

.gpgpl-mapper-text {
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.4;
	color: #33291F;
}

.gpgpl-mapper-status {
	margin: 0;
	font-size: 0.85rem;
	color: #33291F;
}

.gpgpl-mapper-status:empty {
	display: none;
}

.gpgpl-mapper-status.is-error,
.gpgpl-mapper-note {
	color: #9A3A1F;
}

.gpgpl-mapper-note {
	margin: 0 0 8px;
	font-size: 0.85rem;
}

.gpgpl-mapper-ground {
	margin: 0 0 8px;
	font-size: 0.92rem;
	line-height: 1.4;
}

.gpgpl-mapper-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.gpgpl-mapper-actions .gpgpl-btn {
	min-height: 44px;
}

.gpgpl-mapper-actions .gpgpl-btn-primary {
	flex: 1 1 auto;
	max-width: 260px;
}

.gpgpl-mapper-credit {
	margin: 6px 0 0;
	font-size: 10px;
	line-height: 1.3;
	color: #5F5040;
}

.gpgpl-mapper-credit:empty {
	display: none;
}

.gpgpl-mapper-wait {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
	font-weight: 600;
}

.gpgpl-mapper-spin {
	width: 18px;
	height: 18px;
	border: 3px solid rgba(74, 106, 52, 0.25);
	border-top-color: var(--gpgpl-leaf);
	border-radius: 50%;
	animation: gpgpl-mapper-spin 0.8s linear infinite;
}

@keyframes gpgpl-mapper-spin {
	to { transform: rotate(360deg); }
}

.gpgpl-mapper-choices {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gpgpl-mapper-choice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #E2D6C2;
	border-radius: 14px;
	background: #FCF9F3;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.gpgpl-mapper-choice.is-on {
	border-color: var(--gpgpl-leaf);
	background: rgba(74, 106, 52, 0.07);
}

.gpgpl-mapper-choice strong {
	display: block;
	font-size: 0.95rem;
}

.gpgpl-mapper-choice em {
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 6px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font-size: 0.7rem;
	font-style: normal;
	font-weight: 700;
	vertical-align: 1px;
}

.gpgpl-mapper-choice small {
	display: block;
	font-size: 0.8rem;
	color: #5F5040;
}

.gpgpl-mapper-radio {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 2px solid #7A6A58;
	border-radius: 50%;
	box-sizing: border-box;
}

.gpgpl-mapper-choice.is-on .gpgpl-mapper-radio {
	border: 5px solid var(--gpgpl-leaf);
}

/* Corners on the map */
.gpgpl-mapper-corner {
	border: 3px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-leaf-dark, #4A6A34);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
	box-sizing: border-box;
}

.gpgpl-mapper-corner.is-first {
	transform-origin: center;
	background: #E8590C;
	outline: 3px solid rgba(232, 89, 12, 0.35);
}

@media (orientation: landscape) and (max-height: 520px) {
	.gpgpl-mapper-card {
		left: auto;
		right: 12px;
		top: 64px;
		bottom: 12px;
		width: min(360px, 46%);
		max-height: none;
		transform: none;
	}
}

/* ======================================================================
   Add your own plant: name, then "Create care guide" or "Just add" (1.47.0)
   ====================================================================== */

.gpgpl-add-plant-form .gpgpl-new-name {
	font-size: 1rem;
	padding: 0.6rem 0.7rem;
}

.gpgpl-add-plant-form.is-own-name .gpgpl-own-label,
.gpgpl-add-plant-form.is-own-working .gpgpl-own-label {
	font-family: var(--gpgpl-font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
}

.gpgpl-own-help {
	margin: 0.1rem 0 0;
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-own-help[hidden],
.gpgpl-own-match[hidden],
.gpgpl-own-choices[hidden],
.gpgpl-own-working[hidden],
.gpgpl-own-manual[hidden],
.gpgpl-own-problem[hidden],
.gpgpl-own-back[hidden],
.gpgpl-own-choice-tag[hidden],
.gpgpl-own-submit[hidden],
.gpgpl-add-plant-form .gpgpl-form-actions[hidden],
.gpgpl-info-care[hidden],
.gpgpl-info-make-care[hidden] {
	display: none;
}

.gpgpl-own-manual {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

/* The two big choices */
.gpgpl-own-choices {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.gpgpl-own-choice {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 64px;
	padding: 0.7rem 0.8rem;
	border: 1.5px solid var(--gpgpl-border);
	border-radius: 16px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.08s ease;
}

.gpgpl-own-choice:hover {
	border-color: var(--gpgpl-leaf);
	background: #FAF6EE;
}

.gpgpl-own-choice:active {
	transform: translateY(1px);
}

.gpgpl-own-choice.gpgpl-own-guide {
	border-color: var(--gpgpl-leaf);
	background: linear-gradient(135deg, #EAE9D8, #FCF9F3 70%);
}

.gpgpl-own-choice-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: var(--gpgpl-paper);
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-own-guide .gpgpl-own-choice-icon {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-own-choice-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.gpgpl-own-choice-text b {
	font-size: 0.9rem;
	line-height: 1.25;
}

.gpgpl-own-choice-text small {
	font-size: 0.75rem;
	line-height: 1.35;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-own-choice-tag {
	position: absolute;
	top: -8px;
	right: 10px;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--gpgpl-gold);
	color: #4A3000;
	font-size: 0.68rem;
	font-weight: 700;
}

/* "Already in our plant library" */
.gpgpl-own-match {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.6rem;
	border-radius: 14px;
	background: #FFF8EA;
	border: 1px solid #F4E1B8;
}

.gpgpl-own-match-title {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	color: #7A5200;
}

.gpgpl-own-match-item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.4rem 0.5rem;
	border: 1px solid #F0DDB2;
	border-radius: 12px;
	background: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	text-align: left;
	cursor: pointer;
}

.gpgpl-own-match-item:hover {
	border-color: var(--gpgpl-gold);
}

.gpgpl-own-match-item img,
.gpgpl-own-match-dot {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	object-fit: cover;
}

.gpgpl-own-match-item > span:not(.gpgpl-own-match-dot):not(.gpgpl-own-match-add) {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.gpgpl-own-match-item b {
	font-size: 0.84rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-own-match-item small {
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-own-match-add {
	flex: none;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font-size: 0.75rem;
	font-weight: 700;
}

.gpgpl-own-match-or {
	margin: 0.1rem 0 0;
	font-size: 0.72rem;
	color: #7A5200;
}

/* Writing the guide */
.gpgpl-own-working,
.gpgpl-care-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.1rem 0.5rem 0.6rem;
	text-align: center;
}

.gpgpl-own-working-text,
.gpgpl-care-loading-text {
	margin: 0.3rem 0 0;
	font-family: var(--gpgpl-font-display);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	min-height: 1.4em;
}

.gpgpl-own-working-sub {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-own-spinner {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 4px solid var(--gpgpl-paper);
	border-top-color: var(--gpgpl-leaf);
	animation: gpgpl-own-spin 0.9s linear infinite;
}

@keyframes gpgpl-own-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-own-spinner {
		animation-duration: 3s;
	}
}

/* Not a plant / limit reached / no connection */
.gpgpl-own-problem {
	padding: 0.65rem 0.7rem;
	border-radius: 14px;
	background: #FFF1EE;
	border: 1px solid #F6CFC6;
}

.gpgpl-own-problem p {
	margin: 0;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #7A2A18;
}

.gpgpl-own-problem-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.55rem;
}

.gpgpl-own-problem-actions .gpgpl-btn {
	white-space: normal;
	text-decoration: none;
	text-align: center;
}

.gpgpl-own-back {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.25rem 0.4rem 0.25rem 0.1rem;
	border: none;
	background: none;
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

/* The plant card's buttons */
.gpgpl-info-care,
.gpgpl-info-make-care {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.6rem;
	padding: 0.5rem 0.8rem;
	border-radius: 12px;
	border: 1.5px solid var(--gpgpl-leaf);
	background: #EAE9D8;
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.84rem;
	font-weight: 700;
	cursor: pointer;
}

.gpgpl-info-make-care {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-info-care:hover {
	background: #E2E8D3;
}

.gpgpl-info-make-care:hover {
	background: var(--gpgpl-leaf-dark);
	border-color: var(--gpgpl-leaf-dark);
}

button.gpgpl-design-card-link {
	align-self: flex-start;
	padding: 0;
	border: none;
	background: none;
	font-family: var(--gpgpl-font-ui);
	cursor: pointer;
}

/* ---- The care guide sheet ---- */

.gpgpl-care {
	position: absolute;
	inset: 0;
	z-index: 58;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gpgpl-pad-t, 12px) var(--gpgpl-pad-r, 12px) var(--gpgpl-pad-b, 12px) var(--gpgpl-pad-l, 12px);
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.3s;
}

.gpgpl-care.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.gpgpl-care-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(51, 41, 31, 0.45);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gpgpl-care.is-open .gpgpl-care-backdrop {
	opacity: 1;
}

.gpgpl-care-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(520px, 100%);
	max-height: 100%;
	border-radius: 22px;
	background: #FCF9F3;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	opacity: 0;
	transform: translateY(16px) scale(0.98);
	transition: opacity 0.22s ease, transform 0.3s var(--gpgpl-ease, ease);
}

.gpgpl-care.is-open .gpgpl-care-card {
	opacity: 1;
	transform: none;
}

.gpgpl-care-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 0.8rem 0.8rem 1.1rem;
	border-bottom: 1px solid var(--gpgpl-border);
}

.gpgpl-care-swatch {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.gpgpl-care-heading {
	flex: 1;
	min-width: 0;
}

.gpgpl-care-title {
	margin: 0;
	font-family: var(--gpgpl-font-display);
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--gpgpl-ink);
}

.gpgpl-care-sub {
	margin: 0.1rem 0 0;
	font-size: 0.8rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-sub[hidden] {
	display: none;
}

.gpgpl-care-close {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	cursor: pointer;
}

.gpgpl-care-close:hover {
	background: var(--gpgpl-paper);
	color: var(--gpgpl-ink);
}

.gpgpl-care-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.9rem 1.1rem 0.6rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--gpgpl-ink);
}

.gpgpl-care-summary {
	margin: 0 0 0.85rem;
	font-size: 0.92rem;
}

.gpgpl-care-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
	margin-bottom: 0.85rem;
}

.gpgpl-care-tile {
	display: flex;
	gap: 0.5rem;
	padding: 0.55rem 0.6rem;
	border-radius: 14px;
	background: var(--gpgpl-paper);
}

.gpgpl-care-tile-icon {
	flex: none;
	font-size: 1.1rem;
	line-height: 1.3;
}

.gpgpl-care-tile > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpgpl-care-tile small {
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-tile b {
	font-size: 0.82rem;
	line-height: 1.3;
}

.gpgpl-care-tile em {
	font-size: 0.72rem;
	font-style: normal;
	line-height: 1.3;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-caution {
	margin: 0 0 0.85rem;
	padding: 0.6rem 0.7rem;
	border-radius: 14px;
	background: #FFF6E2;
	border: 1px solid #F2DDA8;
	font-size: 0.82rem;
	color: #5A3E00;
}

.gpgpl-care-sections h4,
.gpgpl-care-jobs-title {
	margin: 0.8rem 0 0.2rem;
	font-family: var(--gpgpl-font-display);
	font-size: 0.92rem;
	color: var(--gpgpl-ink);
}

.gpgpl-care-sections h4:first-child {
	margin-top: 0;
}

.gpgpl-care-sections p {
	margin: 0;
}

.gpgpl-care-jobs-title {
	margin-top: 1.1rem;
}

.gpgpl-care-jobs-note {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-months {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.gpgpl-care-month {
	padding: 0.55rem 0.7rem;
	border-radius: 14px;
	border: 1px solid var(--gpgpl-border);
}

.gpgpl-care-month.is-now {
	border-color: var(--gpgpl-leaf);
	background: #FAF6EE;
}

.gpgpl-care-month-name {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-care-month-name i {
	margin-left: 0.3rem;
	padding: 0.05rem 0.45rem;
	border-radius: 999px;
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
	font-size: 0.66rem;
	font-style: normal;
}

.gpgpl-care-month ul {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.gpgpl-care-month li b {
	display: block;
	font-size: 0.84rem;
}

.gpgpl-care-month li.is-high b::after {
	content: " · important";
	font-weight: 600;
	font-size: 0.72rem;
	color: var(--gpgpl-clay-dark);
}

.gpgpl-care-month li span {
	display: block;
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-jobs-link {
	margin-top: 0.55rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
}

.gpgpl-care-credit {
	margin: 1rem 0 0.2rem;
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-care-loading p {
	margin: 0;
}

.gpgpl-care-loading .gpgpl-btn {
	margin-top: 0.7rem;
}

.gpgpl-care-foot {
	display: flex;
	padding: 0.6rem 1.1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--gpgpl-border);
}

.gpgpl-care-foot .gpgpl-btn {
	flex: 1;
	padding: 0.65rem;
	font-size: 0.92rem;
}

/* Phones: a sheet that rises from the bottom. */
@media (max-width: 600px) {
	.gpgpl-care {
		align-items: flex-end;
		padding: 0;
	}

	.gpgpl-care-card {
		width: 100%;
		max-height: 92%;
		border-radius: 22px 22px 0 0;
		transform: translateY(40px);
	}

	.gpgpl-care-tiles {
		gap: 0.35rem;
	}
}

@media (max-width: 340px) {
	.gpgpl-care-tiles {
		grid-template-columns: 1fr;
	}
}

.gpgpl-design-area.is-touring .gpgpl-care {
	display: none;
}

/* ======================================================================
   Plant photos (1.47.0)
   ====================================================================== */

.gpgpl-plant-token.has-photo {
	border-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 5px rgba(51, 41, 31, 0.35);
}

.gpgpl-plant-token.has-photo .gpgpl-token-label {
	text-shadow: 0 0 3px #FCF9F3, 0 0 6px #FCF9F3;
}

.gpgpl-info-photo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.6rem 0.4rem 0 0;
	padding: 0.5rem 0.8rem;
	border-radius: 12px;
	border: 1.5px solid var(--gpgpl-border);
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.84rem;
	font-weight: 700;
	cursor: pointer;
}

.gpgpl-info-photo:hover {
	border-color: var(--gpgpl-leaf);
}

.gpgpl-info-photo[hidden] {
	display: none;
}

.gpgpl-info-care,
.gpgpl-info-make-care {
	margin-right: 0.4rem;
}

.gpgpl-photo-sheet .gpgpl-care-card {
	width: min(440px, 100%);
}

.gpgpl-photo-body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-bottom: 1rem;
}

.gpgpl-photo-stage {
	align-self: center;
	width: min(100%, 300px);
	aspect-ratio: 1;
	border-radius: 18px;
	overflow: hidden;
	background:
		repeating-conic-gradient(#E2E8D3 0% 25%, #FCF9F3 0% 50%) 50% / 20px 20px;
	box-shadow: inset 0 0 0 1px var(--gpgpl-border);
}

.gpgpl-photo-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	cursor: grab;
}

.gpgpl-photo-canvas:active {
	cursor: grabbing;
}

.gpgpl-photo-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-photo-row[hidden] {
	display: none;
}

.gpgpl-photo-row input[type="range"] {
	flex: 1;
	accent-color: var(--gpgpl-leaf);
	min-height: 32px;
}

.gpgpl-photo-options {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.65rem 0.7rem;
	border-radius: 14px;
	background: var(--gpgpl-paper);
}

.gpgpl-photo-switch {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	cursor: pointer;
}

.gpgpl-photo-switch input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.gpgpl-photo-switch-ui {
	flex: none;
	position: relative;
	width: 44px;
	height: 26px;
	border-radius: 999px;
	background: #E2D6C2;
	transition: background 0.15s ease;
}

.gpgpl-photo-switch-ui::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FCF9F3;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.gpgpl-photo-switch input:checked + .gpgpl-photo-switch-ui {
	background: var(--gpgpl-leaf);
}

.gpgpl-photo-switch input:checked + .gpgpl-photo-switch-ui::after {
	transform: translateX(18px);
}

.gpgpl-photo-switch input:focus-visible + .gpgpl-photo-switch-ui {
	outline: 3px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-photo-switch b {
	display: block;
	font-size: 0.86rem;
	color: var(--gpgpl-ink);
}

.gpgpl-photo-switch small {
	display: block;
	font-size: 0.74rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-photo-tip {
	margin: 0;
	font-size: 0.76rem;
	color: #6B4E00;
}

.gpgpl-photo-tip[hidden] {
	display: none;
}

.gpgpl-photo-preview {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-photo-dot {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 2px solid #FCF9F3;
	box-shadow: 0 1px 5px rgba(51, 41, 31, 0.35);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.gpgpl-photo-dot.is-cut {
	background-size: contain;
}

.gpgpl-photo-actions {
	display: flex;
	gap: 0.5rem;
}

.gpgpl-photo-actions .gpgpl-btn {
	flex: 1;
	padding: 0.65rem;
	font-size: 0.9rem;
}

.gpgpl-photo-remove {
	align-self: center;
	padding: 0.3rem 0.5rem;
	border: none;
	background: none;
	color: var(--gpgpl-clay-dark);
	font-family: var(--gpgpl-font-ui);
	font-size: 0.8rem;
	font-weight: 600;
	cursor: pointer;
}

.gpgpl-photo-note {
	margin: 0;
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
	text-align: center;
}

/* The camera button beside the plant's name (1.48.1) */
.gpgpl-own-name-row {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.gpgpl-own-name-row .gpgpl-new-name {
	flex: 1;
	min-width: 0;
}

.gpgpl-own-photo-wrap {
	position: relative;
	flex: none;
	display: flex;
}

.gpgpl-own-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.05rem;
	width: 56px;
	min-height: 48px;
	padding: 0.25rem;
	border: 1.5px dashed var(--gpgpl-leaf);
	border-radius: var(--gpgpl-radius-s);
	background: #FAF6EE center / cover no-repeat;
	color: var(--gpgpl-leaf-dark);
	font-family: var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-own-photo[hidden],
.gpgpl-own-photo-clear[hidden] {
	display: none;
}

.gpgpl-own-photo:hover {
	background-color: #EAE9D8;
}

.gpgpl-own-photo-text {
	font-size: 0.66rem;
	font-weight: 700;
}

.gpgpl-own-photo.has-photo {
	border-style: solid;
	border-color: var(--gpgpl-leaf);
	justify-content: flex-end;
}

.gpgpl-own-photo.has-photo.is-cut {
	background-size: contain;
	background-color: #EAE9D8;
}

.gpgpl-own-photo.has-photo svg {
	display: none;
}

.gpgpl-own-photo.has-photo .gpgpl-own-photo-text {
	padding: 0 0.3rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.9);
}

.gpgpl-own-photo-clear {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: var(--gpgpl-ink);
	color: #FCF9F3;
	font-size: 0.95rem;
	line-height: 1;
	cursor: pointer;
}

.gpgpl-add-plant-form.is-own-working .gpgpl-own-photo-wrap {
	opacity: 0.5;
	pointer-events: none;
}

.gpgpl-own-problem p.gpgpl-own-admin {
	margin-top: 0.45rem;
	padding-top: 0.45rem;
	border-top: 1px dashed #F0BDB1;
	font-size: 0.76rem;
	color: #5A2214;
	word-break: break-word;
}

/* Some themes stop button text wrapping: these must wrap (1.49.1). */
.gpgpl-app .gpgpl-own-choice,
.gpgpl-app .gpgpl-own-choice-text,
.gpgpl-app .gpgpl-own-choice-text b,
.gpgpl-app .gpgpl-own-choice-text small,
.gpgpl-app .gpgpl-own-match-item,
.gpgpl-app .gpgpl-own-problem-actions .gpgpl-btn {
	white-space: normal;
	overflow-wrap: break-word;
}

.gpgpl-app .gpgpl-own-choice-text {
	flex: 1;
	min-width: 0;
}

/* =====================================================================
   1.53: planned or planted (garden-planner-planted.js)
   ===================================================================== */

.gpgpl-planted {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin: 0.6rem 0 0.2rem;
	padding: 0.7rem 0.8rem 0.65rem;
	border-radius: 14px;
	background: rgba(74, 106, 52, 0.08);
}

.gpgpl-planted-label {
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--gpgpl-ink);
}

.gpgpl-planted-seg {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 3px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(74, 106, 52, 0.25);
}

.gpgpl-planted-seg button {
	min-height: 40px;
	padding: 0.35rem 0.5rem;
	border: none;
	border-radius: 9px;
	background: transparent;
	color: var(--gpgpl-ink);
	font: 600 0.86rem/1.2 var(--gpgpl-font-ui);
	white-space: normal;
	cursor: pointer;
}

.gpgpl-planted-seg button[aria-checked="true"] {
	background: var(--gpgpl-leaf, #4A6A34);
	color: #FCF9F3;
}

.gpgpl-planted-seg button[data-planted-set="planned"][aria-checked="true"] {
	background: #6b7f8f;
}

.gpgpl-planted-when {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	font-size: 0.84rem;
	color: var(--gpgpl-ink);
}

.gpgpl-planted-when select {
	min-height: 40px;
	padding: 0.25rem 0.5rem;
	border: 1px solid rgba(74, 106, 52, 0.35);
	border-radius: 9px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 500 16px/1.2 var(--gpgpl-font-ui); /* no zoom on iPhone */
}

.gpgpl-planted-note {
	margin: 0;
	font-size: 0.76rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
	white-space: normal;
}

.gpgpl-planted-all {
	align-self: flex-start;
	padding: 0;
	border: none;
	background: none;
	color: var(--gpgpl-leaf-dark, #4A6A34);
	font: 600 0.8rem/1.3 var(--gpgpl-font-ui);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	white-space: normal;
	text-align: left;
}

.gpgpl-planted-list {
	margin: 0.35rem 0 0;
	padding: 0.5rem;
}

.gpgpl-planted-list .gpgpl-planted-seg button {
	min-height: 36px;
	font-size: 0.8rem;
}

.gpgpl-planted-mixed {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

/* A plant still to be planted: a dashed ring on the plan */
.gpgpl-plant-token.is-planned {
	outline: 2px dashed rgba(255, 255, 255, 0.95);
	outline-offset: -4px;
	opacity: 0.85;
}

/* This week's weather jobs on the Jobs tab (1.54) */
.gpgpl-wxjobs-sub {
	margin: -0.3rem 0 0.5rem;
}

.gpgpl-job.is-weather {
	border-left: 4px solid #4f88ab;
}

.gpgpl-job.is-weather.is-urgent {
	border-left-color: #d9822b;
}

.gpgpl-wxjob-ico {
	display: inline-flex;
	vertical-align: -3px;
	margin-right: 4px;
}

.gpgpl-wxjobs-empty .gpgpl-btn {
	margin-top: 0.5rem;
	white-space: normal;
}

.gpgpl-wxjobs-none {
	margin-bottom: 1rem;
}

/* =====================================================================
   1.55: plant pictures in search, and a bigger look (garden-planner.js)
   ===================================================================== */

.gpgpl-search-thumb {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.gpgpl-search-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A hint that the picture opens a bigger look */
.gpgpl-search-thumb::after {
	content: "";
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92) center / 10px 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%232f6b45' stroke-width='3'/%3E%3Cpath d='M15 15l5 5' stroke='%232f6b45' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.gpgpl-search-result {
	min-height: 64px;
}

.gpgpl-plant-preview {
	position: fixed;
	inset: 0;
	z-index: 100090;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	background: rgba(51, 41, 31, 0.45);
	animation: gpgpl-fade-in 0.15s ease-out;
}

@media (min-width: 640px) {
	.gpgpl-plant-preview {
		align-items: center;
		padding: 24px;
	}
}

.gpgpl-plant-preview-card {
	width: 100%;
	max-width: 440px;
	max-height: 92vh;
	overflow: auto;
	border-radius: 22px 22px 0 0;
	background: #FCF9F3;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 640px) {
	.gpgpl-plant-preview-card {
		border-radius: 22px;
	}
}

.gpgpl-plant-preview-pic {
	position: relative;
	aspect-ratio: 4 / 3;
	max-height: 52vh;
	width: 100%;
	overflow: hidden;
}

.gpgpl-plant-preview-pic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gpgpl-plant-preview-lo {
	filter: blur(6px);
	transform: scale(1.06);
}

.gpgpl-plant-preview-hi {
	opacity: 0;
	transition: opacity 0.25s ease;
}

.gpgpl-plant-preview-hi.is-in {
	opacity: 1;
}

.gpgpl-plant-preview-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	color: var(--gpgpl-ink);
	font-size: 26px;
	line-height: 40px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.gpgpl-plant-preview-body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 1rem 1.1rem 1.1rem;
}

.gpgpl-plant-preview-name {
	font: 700 1.15rem/1.25 var(--gpgpl-font-display, inherit);
	color: var(--gpgpl-ink);
}

.gpgpl-plant-preview-meta {
	font-size: 0.86rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-plant-preview-note {
	margin: 0.2rem 0 0;
	font-size: 0.84rem;
	line-height: 1.4;
	color: var(--gpgpl-leaf-dark, #4A6A34);
}

.gpgpl-plant-preview-note.is-warn {
	color: #9a4a0b;
}

.gpgpl-plant-preview-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 0.5rem;
}

.gpgpl-plant-preview-add {
	flex: 1 1 auto;
	min-height: 48px;
}

.gpgpl-plant-preview-link {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--gpgpl-leaf-dark, #4A6A34);
}

/* =====================================================================
   1.57: a little reward when a score goes up (garden-planner-score.js)
   ===================================================================== */

/* The chip bounces once and glows */
.gpgpl-score-chip.is-up {
	animation: gpgpl-chip-up 0.7s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.gpgpl-score-chip.is-up .gpgpl-score-ring,
.gpgpl-score-chip.is-up .gpgpl-score-medal-mini {
	animation: gpgpl-ring-glow 0.9s ease-out;
}

@keyframes gpgpl-chip-up {
	0% { transform: scale(1); }
	35% { transform: scale(1.09); }
	100% { transform: scale(1); }
}

@keyframes gpgpl-ring-glow {
	0% { box-shadow: 0 0 0 0 rgba(74, 106, 52, 0.55); }
	100% { box-shadow: 0 0 0 12px rgba(74, 106, 52, 0); }
}

.gpgpl-score-chip.is-year.is-up .gpgpl-score-ring {
	animation-name: gpgpl-ring-glow-year;
}

@keyframes gpgpl-ring-glow-year {
	0% { box-shadow: 0 0 0 0 rgba(217, 130, 43, 0.55); }
	100% { box-shadow: 0 0 0 12px rgba(217, 130, 43, 0); }
}

/* With "reduce motion": a soft highlight only */
.gpgpl-score-chip.is-up-still {
	box-shadow: 0 0 0 3px rgba(74, 106, 52, 0.45), var(--gpgpl-float-shadow);
	transition: box-shadow 0.3s;
}

/* "+3" floating up from the chip */
.gpgpl-score-float {
	position: fixed;
	z-index: 1000200;
	transform: translate(-50%, 0);
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--gpgpl-leaf, #4A6A34);
	color: #FCF9F3;
	font: 800 0.85rem/1.4 var(--gpgpl-font-ui);
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
	pointer-events: none;
	animation: gpgpl-float-up 1.2s ease-out forwards;
}

.gpgpl-score-float.is-year {
	background: #d9822b;
}

.gpgpl-score-float.is-jobs {
	background: #2f6f8f;
}

@keyframes gpgpl-float-up {
	0% { opacity: 0; transform: translate(-50%, 6px) scale(0.8); }
	18% { opacity: 1; transform: translate(-50%, -6px) scale(1.05); }
	70% { opacity: 1; transform: translate(-50%, -26px) scale(1); }
	100% { opacity: 0; transform: translate(-50%, -38px) scale(1); }
}

/* A new wildlife level ("Buzzing"): its name lights up */
.gpgpl-score-wild-level.is-new-level {
	animation: gpgpl-level-flash 1s ease-out;
}

@keyframes gpgpl-level-flash {
	0%, 100% { color: inherit; }
	30% { color: var(--gpgpl-leaf, #4A6A34); text-shadow: 0 0 8px rgba(74, 106, 52, 0.5); }
}

/* A better garden badge: a shine across the medal, a bounce, sparks */
.gpgpl-score-chip.is-tierup {
	position: relative;
	overflow: hidden;
	animation: gpgpl-chip-up 0.8s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.gpgpl-score-chip.is-tierup .gpgpl-score-medal-mini {
	animation: gpgpl-medal-spin 0.9s ease-out;
}

.gpgpl-score-chip.is-tierup::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.8), transparent);
	animation: gpgpl-shine 1.1s ease-out 0.15s;
	pointer-events: none;
}

@keyframes gpgpl-medal-spin {
	0% { transform: rotateY(0) scale(1); }
	50% { transform: rotateY(180deg) scale(1.2); }
	100% { transform: rotateY(360deg) scale(1); }
}

@keyframes gpgpl-shine {
	from { left: -60%; }
	to { left: 120%; }
}

.gpgpl-score-spark {
	position: fixed;
	z-index: 1000200;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: #f2c94c;
	box-shadow: 0 0 6px rgba(242, 201, 76, 0.9);
	pointer-events: none;
	animation: gpgpl-spark 0.9s ease-out forwards;
}

@keyframes gpgpl-spark {
	0% { opacity: 1; transform: translate(0, 0) scale(1); }
	100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-score-chip.is-up,
	.gpgpl-score-chip.is-tierup,
	.gpgpl-score-chip.is-tierup::after,
	.gpgpl-score-wild-level.is-new-level {
		animation: none;
	}
}

/* =====================================================================
   1.59: the Garden sheet, simpler: location, shape, measurements
   ===================================================================== */

.gpgpl-gs-step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.4rem 0 0.5rem;
	font: 700 0.95rem/1.3 var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
}

.gpgpl-gs-step span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--gpgpl-leaf, #4A6A34);
	color: #FCF9F3;
	font-size: 0.8rem;
}

.gpgpl-gs-body .gpgpl-gs-map {
	border-width: 1.5px;
}

.gpgpl-gs-body .gpgpl-shape-edit-toggle:disabled {
	opacity: 0.6;
}

.gpgpl-gs-link {
	display: block;
	margin: -0.35rem 0 0.7rem;
	padding: 0.25rem 0;
	border: none;
	background: none;
	color: var(--gpgpl-leaf-dark, #4A6A34);
	font: 600 0.88rem/1.3 var(--gpgpl-font-ui);
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
	text-align: left;
	white-space: normal;
}

.gpgpl-gs-place-now {
	margin: -0.3rem 0 0.8rem;
	font-size: 0.84rem;
	line-height: 1.35;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-gs-body .gpgpl-custom-size {
	margin-bottom: 0.3rem;
}

.gpgpl-gs-body .gpgpl-custom-size input[type="number"] {
	flex: 1 1 0;
	width: auto;
	min-width: 0;
	min-height: 44px;
	font-size: 16px;
}

.gpgpl-gs-hint {
	margin: 0 0 0.5rem;
	font-size: 0.78rem;
	line-height: 1.35;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-gs-sides {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin-bottom: 0.4rem;
}

.gpgpl-gs-side {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 12px;
	background: #FCF9F3;
}

.gpgpl-gs-side-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-gs-side-input {
	flex: 0 0 4.6em;
	width: 4.6em;
	min-height: 36px;
	padding: 0.2rem 0.35rem;
	border: 1px solid rgba(74, 106, 52, 0.35);
	border-radius: 8px;
	font: 600 16px/1.2 var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	text-align: right;
}

.gpgpl-gs-side-unit {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-gs-side-curved {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--gpgpl-ink);
	white-space: nowrap;
}

.gpgpl-gs-side-curved small {
	font-weight: 400;
	color: var(--gpgpl-ink-soft);
}

/* Each side's length on the plan */
.gpgpl-side-label {
	font: 700 12px/1 var(--gpgpl-font-ui, sans-serif);
	fill: #33291F;
	paint-order: stroke;
	stroke: rgba(255, 255, 255, 0.92);
	stroke-width: 4px;
	stroke-linejoin: round;
	pointer-events: none;
}

.gpgpl-side-label.is-lit {
	fill: #b0560f;
	font-size: 14px;
}

/* Start again (in More) */
.gpgpl-add-menu-item.is-danger {
	color: #b3361f;
}

.gpgpl-gs-body .gpgpl-bed-size[hidden],
.gpgpl-gs-place-now[hidden] {
	display: none !important;
}

/* ===== Fruit and veg (1.60.0, garden-planner-kitchen.js) ===== */

.gpgpl-score-chip[hidden],
.gpgpl-score-tab[hidden] {
	display: none !important;
}

/* What will you grow? (the Garden menu) */
.gpgpl-gs-grow {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.gpgpl-grow-opt {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	justify-content: center;
	gap: 6px;
	min-height: 96px;
	padding: 0.65rem 0.3rem 0.6rem;
	border: 1.5px solid rgba(51, 41, 31, 0.16);
	border-radius: 16px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.gpgpl-grow-opt:hover {
	border-color: var(--gpgpl-leaf);
}

.gpgpl-grow-opt:focus-visible {
	outline: 3px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-grow-opt.is-selected {
	border-color: var(--gpgpl-leaf);
	background: rgba(74, 106, 52, 0.1);
	box-shadow: inset 0 0 0 1px var(--gpgpl-leaf);
}

.gpgpl-grow-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #F2EADC;
}

.gpgpl-grow-opt.is-selected .gpgpl-grow-ico {
	background: #FCF9F3;
}

/* Titles only (1.82.1): they wrap inside the card on narrow phones. */
.gpgpl-grow-opt strong {
	max-width: 100%;
	font-size: 0.86rem;
	line-height: 1.2;
	white-space: normal;
	overflow-wrap: break-word;
}

.gpgpl-gs-grow-hint {
	margin-bottom: 0.9rem;
}

/* The Food chip: carrot orange */
.gpgpl-score-chip.is-food .gpgpl-score-ring {
	--ring: #E0782E;
	--ring-bg: #FCE3CF;
}

.gpgpl-score-chip.is-food .gpgpl-score-ring > span {
	color: #A4471A;
}

.gpgpl-score-chip.is-food.is-up .gpgpl-score-ring {
	animation-name: gpgpl-ring-glow-food;
}

@keyframes gpgpl-ring-glow-food {
	0% { box-shadow: 0 0 0 0 rgba(224, 120, 46, 0.55); }
	100% { box-shadow: 0 0 0 12px rgba(224, 120, 46, 0); }
}

.gpgpl-score-float.is-food {
	color: #A4471A;
}

.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-food {
	box-shadow: inset 1px 0 0 rgba(51, 41, 31, 0.1);
}

.gpgpl-score-meter.is-dark.is-food > span {
	background: #F09A5B;
}

/* "Bed 1", "Bed 2"… on the plan */
.gpgpl-bed-tags {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.gpgpl-bed-tags[hidden] {
	display: none;
}

.gpgpl-bed-tag {
	position: absolute;
	padding: 1px 7px 1px 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.88);
	box-shadow: inset 3px 0 0 var(--fam, #7A6A58), 0 1px 3px rgba(51, 41, 31, 0.18);
	color: var(--gpgpl-ink);
	font: 700 0.68rem/1.5 var(--gpgpl-font-ui, inherit);
	white-space: nowrap;
	transform: translate(0, 0);
}

.gpgpl-design-area.is-view-3d .gpgpl-bed-tags {
	display: none;
}

/* The Food tab */
.gpgpl-food-top {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.7rem;
}

.gpgpl-food-big {
	flex: none;
	font: 800 2.1rem/1 var(--gpgpl-font-display, inherit);
	color: #A4471A;
}

.gpgpl-food-big small {
	font-size: 1rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-food-say {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 0.92rem;
}

.gpgpl-food-say small {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-food-strip {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: 4px;
	height: 104px;
}

.gpgpl-food-month {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-end;
	gap: 4px;
	height: 100%;
	min-width: 0;
	padding: 0 0 2px;
	border: none;
	border-radius: 8px;
	background: transparent;
	font: inherit;
	cursor: pointer;
}

.gpgpl-food-month.is-gap {
	background: repeating-linear-gradient(135deg, rgba(224, 120, 46, 0.09) 0 6px, transparent 6px 12px);
}

.gpgpl-food-bar {
	display: block;
	border-radius: 6px 6px 3px 3px;
	background: #E6E1D6;
	transition: height 0.4s;
}

.gpgpl-food-month.is-on .gpgpl-food-bar {
	background: linear-gradient(180deg, #F09A5B, #D9692A);
}

.gpgpl-food-month.is-selected .gpgpl-food-bar {
	box-shadow: 0 0 0 2px #FCF9F3, 0 0 0 4px #A4471A;
}

.gpgpl-food-month:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

.gpgpl-food-m {
	font-size: 0.72rem;
	font-weight: 700;
	text-align: center;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-food-month.is-now .gpgpl-food-m {
	color: var(--gpgpl-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.gpgpl-food-gapkey {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-food-gapkey span {
	flex: none;
	width: 14px;
	height: 14px;
	border-radius: 4px;
	background: repeating-linear-gradient(135deg, rgba(224, 120, 46, 0.35) 0 3px, transparent 3px 6px);
}

.gpgpl-food-sow p {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0 0 0.55rem;
	font-size: 0.9rem;
}

.gpgpl-food-sow small {
	font-size: 0.78rem;
	color: #4A6A34;
}

/* Crop rotation: each bed, last year, this year, next year */
.gpgpl-rot-row {
	display: grid;
	grid-template-columns: 4.6rem repeat(3, minmax(0, 1fr));
	gap: 6px;
	align-items: start;
	padding: 0.5rem 0;
	border-top: 1px solid rgba(51, 41, 31, 0.08);
}

.gpgpl-rot-bed {
	font-size: 0.86rem;
	font-weight: 700;
	line-height: 1.3;
}

.gpgpl-rot-cell {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
	min-width: 0;
}

.gpgpl-rot-cell small {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-rot-chip {
	max-width: 100%;
	padding: 2px 7px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--fam, #7A6A58) 16%, #FCF9F3);
	box-shadow: inset 3px 0 0 var(--fam, #7A6A58);
	font-size: 0.74rem;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.gpgpl-rot-chip.is-next {
	border: 1.5px dashed var(--fam, #7A6A58);
	background: #FCF9F3;
	box-shadow: none;
}

.gpgpl-rot-chip.is-clash {
	background: #FFE7E2;
	box-shadow: inset 3px 0 0 #C8553D, 0 0 0 1.5px #C8553D;
}

.gpgpl-rot-none {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-rot .gpgpl-score-warn {
	margin-top: 0.4rem;
}

.gpgpl-job-when.is-crop {
	color: #4A6A34;
}

.gpgpl-chip-crop {
	color: #A4471A;
	font-weight: 700;
}

/* Five tabs (with Food): sized to their words, on one line */
.gpgpl-kitchen-on .gpgpl-score-tab {
	flex: 1 1 auto;
	padding: 0 0.4rem;
	white-space: nowrap;
}

@media (max-width: 420px) {
	.gpgpl-kitchen-on .gpgpl-score-tab {
		padding: 0 0.3rem;
		font-size: 0.76rem;
	}
}

/* ===== The seed tin (1.64.0, garden-planner-seeds.js) ===== */

.gpgpl-seed-body {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	color: var(--gpgpl-ink);
}

.gpgpl-seed-intro {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-seed-add {
	position: relative;
}

.gpgpl-seed-input {
	width: 100%;
	min-height: 48px;
	padding: 0 0.9rem;
	border: 1.5px solid rgba(51, 41, 31, 0.2);
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 16px var(--gpgpl-font-ui);
}

.gpgpl-seed-input:focus {
	outline: none;
	border-color: var(--gpgpl-leaf);
	box-shadow: 0 0 0 3px rgba(74, 106, 52, 0.2);
}

.gpgpl-seed-suggest {
	display: flex;
	flex-direction: column;
	margin-top: 6px;
	overflow: hidden;
	border-radius: 14px;
	background: #FCF9F3;
	box-shadow: 0 6px 18px rgba(51, 41, 31, 0.14);
}

.gpgpl-seed-suggest[hidden] {
	display: none;
}

.gpgpl-seed-sug {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-height: 48px;
	padding: 0.5rem 0.9rem;
	border: none;
	border-top: 1px solid rgba(51, 41, 31, 0.07);
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 0.92rem var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-seed-sug:first-child {
	border-top: none;
}

.gpgpl-seed-sug:hover,
.gpgpl-seed-sug:focus-visible {
	background: #F2EADC;
	outline: none;
}

.gpgpl-seed-sug small {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-seed-sug.is-own {
	color: var(--gpgpl-leaf-dark);
	font-weight: 700;
}

.gpgpl-seed-sug.is-own small {
	font-style: normal;
	font-weight: 400;
}

.gpgpl-seed-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 1.4rem 1rem;
	border: 1.5px dashed rgba(138, 106, 60, 0.4);
	border-radius: 16px;
	text-align: center;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-seed-empty p {
	margin: 0;
}

.gpgpl-seed-now {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.8rem 0.9rem;
	border-radius: 16px;
	background: #EAE9D8;
}

.gpgpl-seed-now p {
	display: flex;
	flex-direction: column;
	margin: 0;
	font-size: 0.92rem;
}

.gpgpl-seed-now small {
	font-size: 0.78rem;
	color: #4A6A34;
}

.gpgpl-seed-now .gpgpl-score-gain {
	align-self: flex-start;
}

.gpgpl-seed-count {
	display: inline-block;
	min-width: 1.5em;
	margin-left: 0.3rem;
	padding: 0 0.4em;
	border-radius: 999px;
	background: #F6E7C8;
	color: #6B4F2A;
	font-size: 0.8rem;
	text-align: center;
	vertical-align: middle;
}

.gpgpl-seed-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpgpl-seed-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.7rem 0;
	border-top: 1px solid rgba(51, 41, 31, 0.08);
}

.gpgpl-seed-item:first-child {
	border-top: none;
}

.gpgpl-seed-ico {
	flex: none;
	display: inline-flex;
	margin-top: 1px;
}

.gpgpl-seed-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
	min-width: 0;
}

.gpgpl-seed-name {
	font-weight: 700;
	font-size: 0.95rem;
	overflow-wrap: break-word;
}

.gpgpl-seed-next {
	font-size: 0.84rem;
	line-height: 1.35;
}

.gpgpl-seed-due {
	display: inline-block;
	min-width: 2.3em;
	padding: 0 0.35em;
	border-radius: 6px;
	background: #F2EADC;
	color: var(--gpgpl-ink);
	font-size: 0.76rem;
	font-weight: 700;
	text-align: center;
}

.gpgpl-seed-due.is-now {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-seed-due.is-unknown {
	background: #FFF1D6;
	color: #7A4A00;
}

.gpgpl-seed-src {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-seed-link {
	padding: 0;
	border: none;
	background: none;
	color: var(--gpgpl-leaf-dark, #4A6A34);
	font: 600 inherit/inherit var(--gpgpl-font-ui);
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.gpgpl-seed-months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3px;
	margin-top: 3px;
}

.gpgpl-seed-m {
	min-width: 0;
	height: 30px;
	padding: 0;
	border: 1.5px solid rgba(51, 41, 31, 0.16);
	border-radius: 8px;
	background: #FCF9F3;
	color: var(--gpgpl-ink-soft);
	font: 700 0.74rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-seed-m.is-on {
	border-color: var(--gpgpl-leaf);
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-seed-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.8rem;
	margin-top: 3px;
	font-size: 0.8rem;
}

.gpgpl-seed-tools select {
	min-height: 32px;
	padding: 0 0.4rem;
	border: 1px solid rgba(51, 41, 31, 0.2);
	border-radius: 8px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 0.8rem var(--gpgpl-font-ui);
}

.gpgpl-seed-item.is-old .gpgpl-seed-tools select {
	border-color: #D9822B;
	color: #9A4F12;
}

.gpgpl-seed-remove {
	flex: none;
	width: 36px;
	height: 36px;
	margin: -4px -6px 0 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--gpgpl-ink-soft);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.gpgpl-seed-remove:hover {
	background: #F3EFE8;
}

/* On the Jobs tab */
.gpgpl-tin-card {
	flex-direction: row !important;
	align-items: center !important;
	gap: 0.7rem !important;
}

.gpgpl-tin-card .gpgpl-push-text {
	flex: 1;
}

.gpgpl-tin-ico {
	flex: none;
	display: inline-flex;
}

.gpgpl-tin-h {
	align-items: center;
}

.gpgpl-job.is-tin .gpgpl-wxjob-ico svg {
	vertical-align: -3px;
}

/* ===== Grow more: propagation guides (1.65.0, garden-planner-grow.js) ===== */

.gpgpl-grow-card[hidden] {
	display: none;
}

.gpgpl-grow-btn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	min-height: 52px;
	margin: 0.4rem 0 0;
	padding: 0.5rem 0.8rem;
	border: 1.5px solid rgba(74, 106, 52, 0.45);
	border-radius: 14px;
	background: #FAF6EE;
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.gpgpl-grow-btn:hover {
	background: #EAE9D8;
}

.gpgpl-grow-btn > svg {
	flex: none;
}

.gpgpl-grow-btn span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.gpgpl-grow-btn b {
	font-size: 0.92rem;
}

.gpgpl-grow-btn small {
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-grow-body {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	color: var(--gpgpl-ink);
}

.gpgpl-grow-head {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.gpgpl-grow-head > svg {
	flex: none;
}

.gpgpl-grow-head span {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.gpgpl-grow-head b {
	font: 700 1.1rem var(--gpgpl-font-display);
}

.gpgpl-grow-head small {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-grow-next {
	margin: 0;
	padding: 0.65rem 0.8rem;
	border-radius: 14px;
	background: #EAE9D8;
	font-size: 0.88rem;
	line-height: 1.4;
}

.gpgpl-grow-next small {
	display: block;
	color: #4A6A34;
}

.gpgpl-grow-method {
	border: 1px solid rgba(51, 41, 31, 0.12);
	border-radius: 16px;
	background: #FCF9F3;
	overflow: hidden;
}

.gpgpl-grow-method > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	min-height: 48px;
	padding: 0.6rem 2.4rem 0.6rem 0.9rem;
	position: relative;
	list-style: none;
	cursor: pointer;
}

.gpgpl-grow-method > summary::-webkit-details-marker {
	display: none;
}

.gpgpl-grow-method > summary::after {
	content: "+";
	position: absolute;
	right: 0.9rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-grow-method[open] > summary {
	background: #FAF6EE;
}

.gpgpl-grow-method[open] > summary::after {
	content: "\2212";
}

.gpgpl-grow-label {
	font-weight: 700;
	font-size: 0.95rem;
}

.gpgpl-grow-when {
	padding: 1px 8px;
	border: 1px solid rgba(74, 106, 52, 0.35);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	font-size: 0.76rem;
	font-weight: 700;
}

.gpgpl-grow-diff {
	font-size: 0.76rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-grow-diff.is-easy {
	color: #4A6A34;
}

.gpgpl-grow-diff.is-tricky {
	color: #9A4F12;
}

.gpgpl-grow-body-in {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.4rem 0.9rem 0.9rem;
	font-size: 0.88rem;
	line-height: 1.45;
}

.gpgpl-grow-body-in p {
	margin: 0;
}

.gpgpl-grow-facts {
	display: grid;
	gap: 4px;
	margin: 0.3rem 0 0;
	padding: 0.6rem 0.75rem;
	border-radius: 12px;
	background: #FBF6EA;
	list-style: none;
}

.gpgpl-grow-facts li {
	position: relative;
	padding-left: 16px;
}

.gpgpl-grow-facts li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #C98F1C;
}

.gpgpl-grow-steps {
	margin: 0;
	padding-left: 1.3em;
}

.gpgpl-grow-steps li {
	margin-bottom: 4px;
}

.gpgpl-grow-more {
	display: grid;
	gap: 6px;
	margin: 0;
}

.gpgpl-grow-more dt {
	font-weight: 700;
	font-size: 0.78rem;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-grow-more dd {
	margin: 0;
}

.gpgpl-grow-remind {
	align-self: flex-start;
	min-height: 40px;
	padding: 0 0.9rem;
	border: 1.5px solid var(--gpgpl-leaf);
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	font: 700 0.84rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-grow-remind.is-on {
	background: var(--gpgpl-leaf);
	color: #FCF9F3;
}

.gpgpl-grow-body-in .gpgpl-score-gain {
	align-self: flex-start;
}

.gpgpl-grow-done {
	align-self: flex-start;
	font-size: 0.82rem;
	font-weight: 700;
	color: #4A6A34;
}

.gpgpl-grow-link {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--gpgpl-leaf-dark);
}

.gpgpl-grow-back {
	align-self: flex-start;
	font-size: 0.86rem;
}

.gpgpl-job-grow {
	display: inline-block;
	margin-top: 4px;
	font-size: 0.8rem;
}

.gpgpl-grow-body > *,
.gpgpl-seed-body > * {
	flex-shrink: 0;
}

/* =====================================================================
   The Home hub (1.67.0, garden-planner-hub.js): Home · Jobs · Design ·
   Seed tin · More, over the design. The planner's panels open over it.
   ===================================================================== */

.gpgpl-hub {
	position: absolute;
	inset: 0;
	z-index: 28;
	display: flex;
	flex-direction: column;
	background: #F2EADC;
	color: var(--gpgpl-ink);
	font-family: var(--gpgpl-font-ui);
	animation: gpgpl-fade-in 0.2s ease;
}

.gpgpl-hub[hidden],
.gpgpl-top-actions[hidden],
.gpgpl-pop-menu[hidden] {
	display: none;
}

.gpgpl-hub-screens {
	position: relative;
	flex: 1;
	min-height: 0;
}

.gpgpl-hub-screen {
	position: absolute;
	inset: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1.5rem max(1rem, env(safe-area-inset-left));
}

.gpgpl-hub-screen[hidden] {
	display: none;
}

.gpgpl-hub-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 640px;
	margin: 0 auto;
}

.gpgpl-hub-inner > * {
	flex-shrink: 0;
}

.gpgpl-hub-h1 {
	margin: 0;
	font: 700 1.5rem/1.15 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

.gpgpl-hub-h2 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 600 1.06rem/1.2 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

.gpgpl-hub-h2-ico {
	display: inline-flex;
}

.gpgpl-hub-h2-ico.is-grow {
	color: #4A6A34;
}

.gpgpl-hub-date,
.gpgpl-hub-sub {
	margin: 0;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-hello {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}

.gpgpl-hub-label {
	margin: 6px 2px -4px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

/* Cards */
.gpgpl-hub-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 14px;
	border: none;
	border-radius: 20px;
	background: #FCF9F3;
	box-shadow: 0 1px 2px rgba(51, 41, 31, 0.06), 0 4px 14px rgba(51, 41, 31, 0.05);
	color: var(--gpgpl-ink);
	font-family: inherit;
	font-size: 1rem;
	text-align: left;
}

button.gpgpl-hub-card {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

button.gpgpl-hub-card:focus-visible,
.gpgpl-hub button:focus-visible,
.gpgpl-hub a:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-hub-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}

.gpgpl-hub-grow {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

.gpgpl-hub-grow b {
	font-size: 0.98rem;
}

.gpgpl-hub-grow small {
	font-size: 0.82rem;
	line-height: 1.35;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-link {
	min-height: 36px;
	padding: 4px 2px;
	border: none;
	background: none;
	color: #4A6A34;
	font: 700 0.86rem var(--gpgpl-font-ui);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-hub-link:hover {
	color: #38522A;
	text-decoration: underline;
}

.gpgpl-hub-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 16px;
	border: none;
	border-radius: 14px;
	background: #4A6A34;
	color: #FCF9F3;
	font: 700 0.92rem var(--gpgpl-font-ui);
	text-decoration: none;
	cursor: pointer;
}

.gpgpl-hub-btn:hover {
	background: #38522A;
	color: #FCF9F3;
}

.gpgpl-hub-btn.is-soft {
	background: #E2E8D3;
	color: #38522A;
}

.gpgpl-hub-btn.is-soft:hover {
	background: #E2E8D3;
	color: #38522A;
}

.gpgpl-hub-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Garden switcher */
.gpgpl-hub-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	max-width: 100%;
	min-height: 42px;
	padding: 0 14px 0 10px;
	border: 1.5px solid #DAE2C9;
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 700 0.9rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-hub-switch > span:not(.gpgpl-hub-switch-ico) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-hub-switch-ico {
	display: inline-flex;
	color: #4A6A34;
}

/* Weather */
.gpgpl-hub-wx {
	background: #38522A;
	color: #FCF9F3;
}

.gpgpl-hub-wx.is-empty {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

.gpgpl-hub-wx.is-empty .gpgpl-hub-wx-ico {
	color: #4A6A34;
}

.gpgpl-hub-wx-loading {
	margin: 0;
	font-size: 0.9rem;
	color: #DDE4CD;
}

.gpgpl-hub-wx-now {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.gpgpl-hub-wx-ico {
	display: inline-flex;
	flex: none;
}

.gpgpl-hub-wx-temp {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.gpgpl-hub-wx-temp b {
	font: 700 1.7rem/1.05 var(--gpgpl-font-display);
}

.gpgpl-hub-wx-temp small {
	overflow: hidden;
	font-size: 0.82rem;
	color: #DDE4CD;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-hub-wx-days {
	display: flex;
	gap: 10px;
	flex: none;
}

.gpgpl-hub-wx-day {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	min-width: 32px;
	font-size: 0.76rem;
	color: #DDE4CD;
}

.gpgpl-hub-wx-day b {
	font-size: 0.9rem;
	color: #FCF9F3;
}

.gpgpl-hub-wx-day.is-cold small:last-child {
	color: #FFD9A8;
	font-weight: 700;
}

.gpgpl-hub-alert {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	padding: 8px 12px;
	border: none;
	border-radius: 14px;
	background: #FFF1DE;
	color: #6E3A00;
	font: 700 0.88rem/1.3 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}

.gpgpl-hub-alert > svg:first-child {
	flex: none;
	color: #B4521B;
}

.gpgpl-hub-alert > span {
	flex: 1;
}

/* Jobs on Home */
.gpgpl-hub-jobs-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.gpgpl-hub .gpgpl-hub-job {
	padding: 10px 0;
	border-radius: 0;
	background: transparent;
	border-top: 1px solid #F2EADC;
}

.gpgpl-hub .gpgpl-hub-job:first-child {
	border-top: 0;
}

.gpgpl-hub-job .gpgpl-job-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.gpgpl-hub-tag {
	display: inline-flex;
	align-items: center;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	white-space: nowrap;
}

.gpgpl-hub-tag.is-weather { background: #DCEBF4; color: #1D5068; }
.gpgpl-hub-tag.is-plant { background: #E2E8D3; color: #38522A; }
.gpgpl-hub-tag.is-crop { background: #FCE3CF; color: #8A3810; }
.gpgpl-hub-tag.is-tin { background: #F6E7C8; color: #6B4F2A; }
.gpgpl-hub-tag.is-grow { background: #ECE3F4; color: #5A3A7A; }

.gpgpl-hub-job.is-urgent .gpgpl-job-title {
	color: #8A3810;
}

.gpgpl-hub-more-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	align-self: flex-start;
	min-height: 36px;
	padding: 0;
	border: none;
	background: none;
	color: #4A6A34;
	font: 700 0.86rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-hub-done {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 700;
	color: #4A6A34;
}

/* Seed tin on Home */
.gpgpl-hub-seed-list,
.gpgpl-hub-grow-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpgpl-hub-seed-list li,
.gpgpl-hub-grow-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-top: 1px solid #F2EADC;
}

.gpgpl-hub-seed-list li:first-child,
.gpgpl-hub-grow-list li:first-child {
	border-top: 0;
}

.gpgpl-hub-seed-list li > span:last-child {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.gpgpl-hub-seed-list b {
	font-size: 0.92rem;
}

.gpgpl-hub-seed-list small {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-grow-list li > span {
	flex: 1;
	font-size: 0.9rem;
	font-weight: 700;
}

/* My gardens */
.gpgpl-hub-gardens {
	display: flex;
	gap: 10px;
	margin: 0 -14px;
	padding: 0 14px 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.gpgpl-hub-garden {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: none;
	width: 124px;
	padding: 0;
	border: none;
	background: none;
	color: var(--gpgpl-ink);
	font-family: inherit;
	text-align: left;
	scroll-snap-align: start;
	cursor: pointer;
}

.gpgpl-hub-garden:disabled {
	opacity: 0.6;
	cursor: default;
}

.gpgpl-hub-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 86px;
	border-radius: 14px;
	background: #F2EADC;
	color: #4A6A34;
}

.gpgpl-hub-thumb svg {
	width: 96px;
	height: 68px;
}

.gpgpl-hub-garden.is-current .gpgpl-hub-thumb {
	box-shadow: inset 0 0 0 2.5px #4A6A34;
}

.gpgpl-hub-garden.is-new .gpgpl-hub-thumb {
	background: #FCF9F3;
	box-shadow: inset 0 0 0 2px #E2D6C2;
	border: 0;
}

.gpgpl-hub-garden.is-new .gpgpl-hub-thumb svg {
	width: 28px;
	height: 28px;
}

.gpgpl-hub-garden-name {
	overflow: hidden;
	font-size: 0.88rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-hub-garden small {
	margin-top: -3px;
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

/* How it's doing */
.gpgpl-hub-score-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
	width: 100%;
}

.gpgpl-hub-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-align: center;
}

.gpgpl-hub-score b {
	font-size: 0.8rem;
}

.gpgpl-hub-score small {
	margin-top: -2px;
	font-size: 0.72rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.gpgpl-hub-ring > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #FCF9F3;
	font: 700 0.86rem var(--gpgpl-font-display);
}

.gpgpl-hub-medal {
	padding: 2px 10px;
	border-radius: 999px;
	background: #F2EADC;
	color: #33291F;
	font-size: 0.74rem;
	font-weight: 700;
}

.gpgpl-hub-medal.is-bronze { background: #F6E3D2; color: #7A4520; }
.gpgpl-hub-medal.is-silver { background: #E2D6C2; color: #33291F; }
.gpgpl-hub-medal.is-gold { background: #FFEDC2; color: #7A5300; }
.gpgpl-hub-medal.is-seedling { background: #E2E8D3; color: #38522A; }

/* Getting started */
.gpgpl-hub-start {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.gpgpl-hub-start-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: conic-gradient(#4A6A34 var(--p), #E2E8D3 0);
}

.gpgpl-hub-start-ring > span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #FCF9F3;
	font-size: 0.78rem;
	font-weight: 700;
}

/* More */
.gpgpl-hub-rows {
	gap: 0;
	padding-top: 4px;
	padding-bottom: 4px;
}

/* (Strong selectors: the moved ⋯ controls have their own floating-button styles.) */
.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	width: 100%;
	height: auto;
	margin: 0;
	min-height: 56px;
	padding: 8px 2px;
	border: none;
	border-top: 1px solid #F2EADC;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* (after the strong .gpgpl-hub-row rule below) */

.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-row[hidden],
.gpgpl-app .gpgpl-design-area.is-app :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-install-btn {
	display: none;
}

.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-rows > .gpgpl-hub-row:first-child,
.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-rows > [hidden]:first-child + .gpgpl-hub-row {
	border-top: 0;
}

.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-row:hover {
	background: #FAF6EE;
}

.gpgpl-app .gpgpl-design-area :is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-row:active {
	transform: none;
}

.gpgpl-hub-row.is-static {
	cursor: default;
}

.gpgpl-hub-row > svg:last-child {
	flex: none;
	color: #7A6A58;
}

.gpgpl-hub-row-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #F2EADC;
	color: #38522A;
}

.gpgpl-hub-row-ico svg {
	width: 20px;
	height: 20px;
}

.gpgpl-hub-row-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1;
	min-width: 0;
}

.gpgpl-hub-row-text b {
	font-size: 0.95rem;
	font-weight: 700;
}

.gpgpl-hub-row-text b span {
	font: inherit;
}

.gpgpl-hub-row-text small {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-row.is-locked .gpgpl-hub-row-text b::after {
	content: " · Premium";
	font-weight: 600;
	color: #9A6A00;
}

/* The full-screen button: only the icon that fits */
:is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-fullscreen-btn .gpgpl-fs-exit,
:is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-fullscreen-btn.is-active .gpgpl-fs-enter {
	display: none;
}

:is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-fullscreen-btn.is-active .gpgpl-fs-exit {
	display: inline;
}

.gpgpl-hub-units .gpgpl-units-switch {
	margin-left: auto;
	background: rgba(74, 106, 52, 0.12);
	box-shadow: none;
}

.gpgpl-hub-me {
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.gpgpl-hub-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #4A6A34;
	color: #FCF9F3;
	font: 700 1.1rem var(--gpgpl-font-display);
}

.gpgpl-hub-avatar.is-guest {
	background: #F2EADC;
	color: #4A6A34;
}

.gpgpl-hub-premium {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	background: #FFF6E2;
	color: #6B4A00;
}

.gpgpl-hub-premium > svg:first-child {
	flex: none;
	color: #D9962B;
}

/* Jobs screen (score.jobsHtml) */
.gpgpl-hub-jobs .gpgpl-score-card {
	border-radius: 20px;
}

/* The seed tin, moved in from its panel */
.gpgpl-hub .gpgpl-seed-panel.is-in-hub {
	position: static;
	display: block;
	visibility: visible;
	opacity: 1;
	width: auto;
	height: auto;
	max-height: none;
	padding: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
	transition: none;
}

.gpgpl-hub .gpgpl-seed-panel.is-in-hub > .gpgpl-panel-header {
	display: none;
}

.gpgpl-hub .gpgpl-seed-panel.is-in-hub .gpgpl-panel-body {
	overflow: visible;
	padding: 0;
}

/* The bar along the bottom */
.gpgpl-hub-nav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	flex: none;
	padding: 6px max(6px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
	border-top: 1px solid #E2D6C2;
	background: #FCF9F3;
}

.gpgpl-hub-nav > [hidden] {
	display: none;
}

.gpgpl-hub-nav-btn,
.gpgpl-hub-nav-design {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-height: 52px;
	padding: 4px 0;
	border: none;
	border-radius: 14px;
	background: none;
	color: var(--gpgpl-ink-soft);
	font: 700 0.7rem var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-hub-nav-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 28px;
	border-radius: 14px;
	transition: background 0.2s;
}

.gpgpl-hub-nav-btn.is-on {
	color: #38522A;
}

.gpgpl-hub-nav-btn.is-on .gpgpl-hub-nav-ico {
	background: #E2E8D3;
}

.gpgpl-hub-nav-design {
	margin-top: -24px;
	color: #38522A;
}

.gpgpl-hub-fab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 20px;
	background: #4A6A34;
	color: #FCF9F3;
	box-shadow: 0 6px 16px rgba(74, 106, 52, 0.35);
}

.gpgpl-hub-badge {
	position: absolute;
	top: 1px;
	left: calc(50% + 6px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #D9622B;
	color: #FCF9F3;
	font-size: 0.68rem;
	line-height: 18px;
	text-align: center;
}

.gpgpl-hub-badge[hidden] {
	display: none;
}

/* Wide screens: the hub's content in a comfortable column, the bar too */
@media (min-width: 760px) {
	.gpgpl-hub-nav {
		justify-content: center;
		grid-template-columns: repeat(5, 110px);
	}
}

/* The design's Home button, top left */
.gpgpl-home-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: #38522A;
	cursor: pointer;
	pointer-events: auto;
}

.gpgpl-home-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-home-dot {
	position: absolute;
	top: 9px;
	right: 9px;
	width: 9px;
	height: 9px;
	border: 2px solid #FCF9F3;
	border-radius: 50%;
	background: #D9622B;
}

.gpgpl-home-dot[hidden] {
	display: none;
}

/* Jobs moved to the hub: the badge ends the score pill */
.gpgpl-app .gpgpl-score-bar .gpgpl-score-chip.is-medal {
	border-radius: 0 16px 16px 0;
}

@media (max-width: 380px) {
	.gpgpl-home-btn {
		width: 44px;
	}
}

.gpgpl-hub-sub a {
	color: #4A6A34;
	font-weight: 700;
}

/* With the hub showing: panels dim it, and messages sit above the bar */
.gpgpl-design-area.is-hub .gpgpl-scrim {
	z-index: 29;
}

.gpgpl-design-area.is-hub .gpgpl-toast {
	top: auto;
	bottom: calc(92px + env(safe-area-inset-bottom));
}

/* =====================================================================
   3D: "Your garden in October" (1.68.0, garden-planner-3d.js), centred
   above the dock, so a bare winter garden makes sense. Gold when the
   Scene slider shows another month. Opens Scene.
   ===================================================================== */

.gpgpl-month-chip {
	position: absolute;
	left: 50%;
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 0.6rem);
	z-index: 19;
	display: none;
	align-items: center;
	gap: 7px;
	max-width: calc(100% - 1.5rem);
	min-height: 40px;
	padding: 0 14px 0 11px;
	border: none;
	border-radius: 999px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	font: 600 0.86rem var(--gpgpl-font-ui);
	white-space: nowrap;
	transform: translateX(-50%);
	cursor: pointer;
	transition: opacity var(--gpgpl-dur) ease, background 0.3s ease;
}

.gpgpl-design-area.is-view-3d .gpgpl-month-chip {
	display: inline-flex;
}

.gpgpl-month-chip > svg {
	flex: none;
	color: #4A6A34;
}

.gpgpl-month-chip-text {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gpgpl-month-chip-text small {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-month-chip-name {
	font: 700 0.98rem var(--gpgpl-font-display);
}

.gpgpl-month-chip-sub::before {
	content: "· ";
}

.gpgpl-month-chip-sub[hidden] {
	display: none;
}

.gpgpl-month-chip.is-other {
	background: #FFF1D6;
}

.gpgpl-month-chip.is-other > svg {
	color: #B4521B;
}

.gpgpl-month-chip.is-winter > svg {
	color: #4F88AB;
}

.gpgpl-month-chip[aria-expanded="true"],
.gpgpl-design-area.has-sheet .gpgpl-month-chip,
.gpgpl-design-area.has-panel .gpgpl-month-chip,
.gpgpl-design-area.is-walking .gpgpl-month-chip,
.gpgpl-design-area.is-touring .gpgpl-month-chip,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-month-chip {
	opacity: 0;
	pointer-events: none;
}

.gpgpl-month-chip:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* The 3D help pill sits above it */
.gpgpl-design-area.is-view-3d .gpgpl-3d-help {
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 3.6rem);
}

.gpgpl-design-area.is-night.is-view-3d .gpgpl-month-chip {
	background: rgba(20, 32, 54, 0.85);
	color: #FCF9F3;
}

.gpgpl-design-area.is-night.is-view-3d .gpgpl-month-chip-text small {
	color: #C9D3E6;
}

/* Who's resting this month, in Scene */
.gpgpl-scene-resting {
	margin: 0 0 4px;
	padding: 8px 10px;
	border-radius: 12px;
	background: #F6EFE4;
	color: #5A4326;
	font-size: 0.82rem;
	line-height: 1.4;
}

.gpgpl-scene-resting[hidden] {
	display: none;
}


/* ---- Photo credits (1.69.0) ----
   A Plant Library photo under CC BY, or a cut-out made from one, is
   credited wherever it's shown (includes/photo-credits.php). */
.gpgpl-photo-credit {
	display: block;
	font-size: 0.72rem;
	line-height: 1.35;
	color: var(--gpgpl-muted, #6b6b6b);
}
.gpgpl-photo-credit a { color: inherit; text-decoration: underline; }
.gpgpl-info-credit { margin: 4px 0 0; }
.gpgpl-plant-preview-credit { margin: 0 0 6px; }
.gpgpl-3d-credits {
	position: absolute;
	left: 8px;
	bottom: 2.8rem; /* above the help line */
	z-index: 2;
	max-width: calc(100% - 16px);
	padding: 3px 8px;
	font-size: 0.7rem;
	line-height: 1.35;
	color: #FCF9F3;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 6px;
}
.gpgpl-3d-credits ul { list-style: none; margin: 0; padding: 0; }
.gpgpl-3d-credits summary { cursor: pointer; }
.gpgpl-3d-credits .gpgpl-photo-credit { color: inherit; font-size: inherit; }
.gpgpl-report-credits { font-size: 0.8rem; color: #555; margin: 0 0 1rem; }
/* In the app: above the month chip and the dock. */
.gpgpl-design-area .gpgpl-3d-credits {
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 0.6rem + 48px);
	z-index: 19;
}

/* =====================================================================
   Scene as a slim strip (1.69.0): the garden stays in view while you
   slide through the months. Three short rows:
     ▶ ──── month slider ──── February   [Done]
     [Day | Night]   Growth ── slider ── Mature
     11 resting in February: …              (one line; tap for all)
   Over the dock, see-through at the top edge; no dimming. The scores and
   getting-started step aside while it's open (has-scene, shell.js).
   ===================================================================== */

.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-scene {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"month month done"
		"dn growth growth"
		"rest rest rest";
	align-items: center;
	gap: 8px 10px;
	max-height: none;
	overflow: visible;
	padding: 10px 12px 12px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-scene::before {
	display: none;
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-scene {
		padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		border-radius: 20px 20px 0 0;
	}
}

/* Row 1: the month, the thing people slide most */
.gpgpl-app .gpgpl-pop-scene .gpgpl-sheet-head {
	grid-area: done;
	margin: 0;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-sheet-title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-pop-done {
	min-height: 40px;
	padding: 0 14px;
	font-size: 0.88rem;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-month {
	grid-area: month;
	margin: 0;
	gap: 8px;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-month .gpgpl-pop-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-3d-play {
	flex: none;
	width: 40px;
	height: 40px;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-3d-month-value {
	min-width: 0;
	width: 4.6em;
	font: 700 1rem var(--gpgpl-font-display);
	text-align: left;
}

/* Row 2: day or night, and how grown */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-scene .gpgpl-daynight {
	grid-area: dn;
	width: auto;
	margin: 0;
	padding: 3px;
	border-radius: 12px;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-daynight-day,
.gpgpl-app .gpgpl-pop-scene .gpgpl-daynight-night {
	height: 34px;
	padding: 0 10px;
	border-radius: 9px;
	font-size: 0.82rem;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-daynight.is-locked .gpgpl-daynight-night::after {
	content: "";
	width: 7px;
	height: 7px;
	padding: 0;
	border-radius: 50%;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-growth {
	grid-area: growth;
	margin: 0;
	gap: 6px;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-growth .gpgpl-pop-label {
	width: auto;
	font-size: 0.76rem;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-3d-growth-value {
	min-width: 0;
	width: 4.4em;
	font-size: 0.78rem;
}

/* Row 3: who's resting, on one line until tapped */
.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-resting {
	grid-area: rest;
	margin: 0;
	padding: 6px 10px;
	overflow: hidden;
	border-radius: 10px;
	font-size: 0.78rem;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-app .gpgpl-pop-scene .gpgpl-scene-resting.is-open {
	white-space: normal;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-scene-resting {
	background: rgba(255, 255, 255, 0.1);
	color: #E8EEF7;
}

.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop.gpgpl-pop-scene {
	background: rgba(22, 35, 58, 0.9);
}

/* While Scene is open: just the top row and the garden */
.gpgpl-design-area.has-scene .gpgpl-dock,
.gpgpl-design-area.has-scene .gpgpl-score-bar,
.gpgpl-design-area.has-scene .gpgpl-checklist,
.gpgpl-design-area.has-scene .gpgpl-month-chip,
.gpgpl-design-area.has-scene .gpgpl-3d-help {
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--gpgpl-dur) ease;
}

.gpgpl-design-area.has-scene .gpgpl-dock *,
.gpgpl-design-area.has-scene .gpgpl-score-bar *,
.gpgpl-design-area.has-scene .gpgpl-checklist * {
	pointer-events: none;
}

/* Messages while it's open: short and out of the way, under the top row */
.gpgpl-design-area.has-scene .gpgpl-toast {
	top: calc(var(--gpgpl-pad-t) + var(--gpgpl-ctl) + 0.6rem);
	bottom: auto;
	font-size: 0.8rem;
}

/* Photo credits (1.69.0) stay readable above Scene's strip on phones */
@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-design-area.has-scene .gpgpl-3d-credits {
		bottom: calc(160px + env(safe-area-inset-bottom));
	}
}

/* =====================================================================
   Phones (1.69.3, garden-planner-shell.js bindPhoneGuards): a double tap
   doesn't zoom the page; sideways overscroll doesn't go back a page; and
   "Zoom back out" if it's zoomed in anyway. :where() keeps this weaker
   than every touch-action: none already set (the plan, 3D, sliders).
   ===================================================================== */
:where(.gpgpl-app, .gpgpl-app *) {
	touch-action: manipulation;
}

html.gpgpl-has-planner,
html.gpgpl-has-planner body {
	overscroll-behavior-x: none;
}

.gpgpl-zoom-back {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 2147483600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 18px 0 14px;
	border: none;
	border-radius: 999px;
	background: #33291F;
	color: #FCF9F3;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
	font: 700 15px/1 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	transform-origin: 0 0;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-zoom-back[hidden] {
	display: none;
}

/* =====================================================================
   Free and Premium (1.70.0): what's Premium is shown in place, with a gold
   tag, never hidden. Tapping it opens the Go Premium card for its reason
   ([data-premium], garden-planner.js).
   ===================================================================== */

.gpgpl-premium-tag {
	display: inline-flex;
	align-items: center;
	flex: none;
	padding: 2px 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, #FFD36E, #F2B13A);
	color: #4A3300;
	font: 700 0.66rem/1.3 var(--gpgpl-font-ui);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	vertical-align: 1px;
}

.gpgpl-premium-teaser {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 48px;
	margin: 2px 0;
	padding: 10px 12px;
	border: 1.5px dashed #E5C26A;
	border-radius: 14px;
	background: #FFF9EA;
	color: #5A4200;
	font: 600 0.84rem/1.35 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
	flex-shrink: 0;
}

.gpgpl-premium-teaser:hover {
	background: #FFF3D2;
}

.gpgpl-premium-teaser:focus-visible,
.gpgpl-job-premium:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-premium-blur {
	filter: blur(4px);
	user-select: none;
	pointer-events: none;
}

/* Score tips past the free one */
.gpgpl-score-gain.is-premium {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #FFF3D2;
	color: #5A4200;
}

.gpgpl-job-premium {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 3px;
	font-size: 0.8rem;
}

.gpgpl-job.is-preview .gpgpl-job-box {
	opacity: 0.45;
}

.gpgpl-grow-remind.is-locked {
	background: #FFF3D2;
	color: #5A4200;
}

/* Scene: "Preview the year" beside "Every season: Premium" */
.gpgpl-scene-month.is-locked {
	gap: 8px;
}

.gpgpl-scene-preview {
	background: #F2EADC;
	color: #38522A;
}

.gpgpl-scene-preview:disabled {
	opacity: 1;
	cursor: default;
}

/* More: Free and Premium side by side */
.gpgpl-hub-plans {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gpgpl-hub-plan {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	border-radius: 14px;
	background: #F2EADC;
}

.gpgpl-hub-plan.is-premium {
	background: #FFF6E2;
}

.gpgpl-hub-plan > b {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font: 700 0.95rem var(--gpgpl-font-display);
}

.gpgpl-hub-plan.is-premium > b svg {
	color: #D9962B;
}

.gpgpl-hub-plan ul {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gpgpl-hub-plan li {
	position: relative;
	padding-left: 14px;
	font-size: 0.8rem;
	line-height: 1.35;
	color: var(--gpgpl-ink);
}

.gpgpl-hub-plan li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4A6A34;
}

.gpgpl-hub-plan.is-premium li::before {
	background: #E0A12A;
}

.gpgpl-hub-plans .gpgpl-hub-go {
	grid-column: 1 / -1;
	align-self: stretch;
	justify-self: stretch;
	background: linear-gradient(135deg, #4A6A34, #38522A);
}

@media (max-width: 360px) {
	.gpgpl-hub-plans {
		grid-template-columns: 1fr;
	}
}

/* =====================================================================
   1.70.1: the site's theme styles labels (capitals, wide letter spacing).
   The planner's labels, ticked jobs among them, use their own text. And
   every text box is 16px on touch screens, whatever the theme says, so
   iPhones don't zoom in.
   ===================================================================== */
.gpgpl-app .gpgpl-design-area label,
.gpgpl-app .gpgpl-design-area label * {
	text-transform: none;
	letter-spacing: normal;
}

.gpgpl-app .gpgpl-design-area label.gpgpl-job {
	margin: 0;
	font-family: var(--gpgpl-font-ui);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.35;
}

@media (pointer: coarse) {
	.gpgpl-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
	.gpgpl-app select,
	.gpgpl-app textarea {
		font-size: 16px !important;
	}
}

.gpgpl-job .gpgpl-premium-blur {
	filter: blur(5px);
}

/* =====================================================================
   Find my garden on a map (1.70.2): the step's buttons stay at the bottom
   of the card, always in view; the ground choices sit side by side.
   ===================================================================== */
.gpgpl-mapper-card {
	display: flex;
	flex-direction: column;
	max-height: min(62%, 520px);
}

.gpgpl-mapper-actions {
	position: sticky;
	bottom: -10px;
	z-index: 1;
	margin: 8px -16px -10px;
	padding: 8px 16px 10px;
	background: #FCF9F3;
	box-shadow: 0 -6px 12px -8px rgba(51, 41, 31, 0.25);
}

.gpgpl-mapper-card > * {
	flex-shrink: 0;
}

.gpgpl-mapper-ground {
	font-size: 0.86rem;
}

.gpgpl-mapper-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 6px;
}

.gpgpl-mapper-choice {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 64px;
	padding: 8px 4px;
	color: var(--gpgpl-ink);
	text-align: center;
}

.gpgpl-mapper-choice strong {
	font-size: 0.86rem;
	line-height: 1.2;
	color: var(--gpgpl-ink);
}

.gpgpl-mapper-choice em {
	display: inline-block;
	margin: 3px 0 0;
	font-size: 0.62rem;
}

.gpgpl-mapper-choice .gpgpl-mapper-radio {
	margin: 0;
}

.gpgpl-mapper-choice-note {
	margin: 6px 2px 0;
	font-size: 0.8rem;
	color: #5F5040;
}

/* =====================================================================
   1.70.2: Home first in the design's bottom bar, always in reach; Undo at
   the top right beside the garden's name. And Premium boxes wrap their
   text (some themes stop buttons wrapping), with nothing wider than the
   screen.
   ===================================================================== */
.gpgpl-app .gpgpl-dock .gpgpl-dock-home {
	color: #38522A;
}

.gpgpl-dock-home-ico {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 28px;
	border-radius: 14px;
	background: #E2E8D3;
	transition: background 0.2s ease, transform 0.15s ease;
}

.gpgpl-app .gpgpl-dock .gpgpl-dock-home:active .gpgpl-dock-home-ico {
	transform: scale(0.94);
	background: #E0E7D1;
}

.gpgpl-dock-home .gpgpl-home-dot {
	top: 1px;
	right: 6px;
	width: 9px;
	height: 9px;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-dock-home-ico {
	background: rgba(255, 255, 255, 0.12);
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-undo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	cursor: pointer;
	pointer-events: auto;
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-undo-btn .gpgpl-dock-label {
	display: none;
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-undo-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-undo-btn {
		width: 44px;
	}
}

.gpgpl-premium-teaser,
.gpgpl-premium-teaser span,
.gpgpl-job-premium,
:is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-card,
:is(.gpgpl-hub, .gpgpl-pop-more) .gpgpl-hub-row {
	white-space: normal;
	overflow-wrap: break-word;
}

.gpgpl-premium-teaser {
	box-sizing: border-box;
	max-width: 100%;
}

.gpgpl-premium-teaser .gpgpl-premium-tag {
	white-space: nowrap;
}

.gpgpl-hub-screen {
	overflow-x: hidden;
}

.gpgpl-hub-jobs,
.gpgpl-hub-jobs > * {
	max-width: 100%;
	min-width: 0;
}

/* =====================================================================
   1.71.0: one bottom bar in Plan and 3D — Home · Garden · + · Explore ·
   More — and a "2D | 3D" switch of its own just above it on the right,
   in easy reach of a thumb, its green thumb sliding across.
   ===================================================================== */
.gpgpl-app .gpgpl-design-area .gpgpl-dock,
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock {
	grid-template-columns: repeat(2, minmax(0, 1fr)) 72px repeat(2, minmax(0, 1fr));
	gap: 2px;
}

@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-dock,
	.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock {
		grid-template-columns: repeat(2, minmax(0, 1fr)) 62px repeat(2, minmax(0, 1fr));
	}

	.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock .gpgpl-dock-label {
		font-size: 0.68rem;
	}
}

.gpgpl-app .gpgpl-design-area .gpgpl-dock .gpgpl-fab {
	justify-self: center;
}

/* The same tools in both views */
.gpgpl-app .gpgpl-design-area.is-view-3d .gpgpl-dock .gpgpl-garden-btn,
.gpgpl-app .gpgpl-design-area.is-view-plan .gpgpl-dock .gpgpl-explore-btn {
	display: flex;
}

/* More: walk-through lives in Explore now; Month, night & growth in 3D */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-more .gpgpl-walk-menu,
.gpgpl-app .gpgpl-design-area .gpgpl-pop-more p.gpgpl-more-heading.gpgpl-more-plan,
.gpgpl-app .gpgpl-design-area.is-view-plan .gpgpl-pop-more .gpgpl-more-3d {
	display: none;
}

/* ---- The 2D | 3D switch ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-view-switch.gpgpl-view-float {
	position: absolute;
	right: var(--gpgpl-pad-r);
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 12px);
	left: auto;
	top: auto;
	z-index: 19;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	width: 124px;
	height: 46px;
	margin: 0;
	padding: 4px;
	border: none;
	border-radius: 999px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	transform: none;
	transition: opacity var(--gpgpl-dur) ease, transform var(--gpgpl-dur) var(--gpgpl-ease);
	isolation: isolate;
}

.gpgpl-view-thumb {
	position: absolute;
	left: 4px;
	top: 4px;
	z-index: 0;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: 999px;
	background: linear-gradient(135deg, #4A6A34, #33291F);
	box-shadow: 0 3px 8px rgba(51, 41, 31, 0.35);
	transition: transform 0.42s cubic-bezier(0.34, 1.45, 0.5, 1);
}

.gpgpl-design-area.is-view-3d .gpgpl-view-float .gpgpl-view-thumb {
	transform: translateX(100%);
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 6px;
	border: none;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--gpgpl-ink);
	font: 700 0.92rem/1 var(--gpgpl-font-display);
	cursor: pointer;
	transition: color 0.25s ease;
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn.is-active {
	color: #FCF9F3;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn svg {
	display: block;
	flex: none;
	transition: transform 0.45s cubic-bezier(0.34, 1.45, 0.5, 1);
}

/* The icon of the view you've just picked gives a little turn */
.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn.is-active svg {
	transform: rotate(-12deg) scale(1.12);
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn[disabled] {
	opacity: 0.45;
	cursor: default;
}

.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-view-thumb,
	.gpgpl-app .gpgpl-design-area .gpgpl-view-float .gpgpl-view-btn svg {
		transition: none;
	}
}

/* Out of the way while something else is going on */
.gpgpl-design-area.has-sheet .gpgpl-view-float,
.gpgpl-design-area.has-scene .gpgpl-view-float,
.gpgpl-design-area.has-selbar .gpgpl-view-float,
.gpgpl-design-area.has-card .gpgpl-view-float,
.gpgpl-design-area.is-walking .gpgpl-view-float,
.gpgpl-design-area.is-shape-editing .gpgpl-view-float,
.gpgpl-design-area.is-feature-drawing .gpgpl-view-float,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-view-float {
	opacity: 0;
	pointer-events: none;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-view-float {
	--gpgpl-glass: rgba(18, 30, 48, 0.86);
	--gpgpl-ink: #E8EEF7;
}

/* "Your garden in October" moves to the left, beside the switch */
.gpgpl-month-chip {
	left: var(--gpgpl-pad-l);
	right: auto;
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 15px);
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r) - 136px);
	transform: none;
}

@media (max-width: 400px) {
	.gpgpl-month-chip-text > small:first-child {
		display: none;
	}
}

/* The 3D help line sits above both */
.gpgpl-design-area.is-view-3d .gpgpl-3d-help {
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 4.4rem);
}

/* Phones on their side: the switch sits beside the bar */
@media (orientation: landscape) and (max-height: 500px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-view-switch.gpgpl-view-float {
		bottom: var(--gpgpl-pad-b);
		height: 44px;
		width: 116px;
	}
}

/* =====================================================================
   Explore (1.72.0): one slim strip over the 3D garden, see-through at the
   edge, no dimming.
     Explore            [☀ Day | ☾ Night]     [Done]
     ▶ ───── month slider ───── August
     [ Walk a route  ▶ Walk  ✎ Draw ] [ Stand & look  ⌖ Pick a spot ]
   ===================================================================== */
.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: none;
	overflow: visible;
	padding: 10px 12px 12px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore::before {
	display: none;
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
		padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		border-radius: 20px 20px 0 0;
	}
}

.gpgpl-xp-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-xp-title {
	flex: none;
	margin: 0;
	font: 700 1.05rem var(--gpgpl-font-display);
}

.gpgpl-xp-daynight {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-pop-done {
	flex: none;
	min-height: 38px;
	padding: 0 14px;
	font-size: 0.86rem;
}

/* Day / night: two small pills */
.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-daynight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 3px;
	border: none;
	border-radius: 12px;
	background: rgba(74, 106, 52, 0.12);
	box-shadow: none;
	color: var(--gpgpl-ink);
	cursor: pointer;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight svg {
	display: none;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day,
.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night {
	height: 32px;
	padding: 0 12px;
	border-radius: 9px;
	font-size: 0.82rem;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-day::before {
	content: "\2600\FE0E";
	margin-right: 4px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight-night::before {
	content: "\263E\FE0E";
	margin-right: 4px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-daynight.is-locked .gpgpl-daynight-night::after {
	content: "";
	width: 7px;
	height: 7px;
	padding: 0;
	margin-left: 4px;
	border-radius: 50%;
}

/* The seasons */
.gpgpl-xp-seasons {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month {
	margin: 0;
	gap: 8px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month .gpgpl-pop-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-play {
	flex: none;
	width: 38px;
	height: 38px;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-3d-month-value {
	min-width: 0;
	width: 4.8em;
	font: 700 1rem var(--gpgpl-font-display);
	text-align: left;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting {
	margin: 0;
	padding: 5px 10px;
	overflow: hidden;
	border-radius: 10px;
	font-size: 0.76rem;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting.is-open {
	white-space: normal;
}

/* Two tiles: walk a route, and stand and look */
.gpgpl-xp-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tiles {
	visibility: visible;
	opacity: 1;
	position: static;
	transform: none;
	box-shadow: none;
	background: transparent;
	padding: 0;
	margin: 0;
	width: auto;
	pointer-events: auto;
}

.gpgpl-xp-tile {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"ico name"
		"ico sub"
		"acts acts";
	column-gap: 8px;
	row-gap: 1px;
	align-items: center;
	padding: 9px 10px 10px;
	border-radius: 16px;
	background: linear-gradient(160deg, #EAE9D8, #E2E8D3);
}

.gpgpl-xp-tile.is-look {
	background: linear-gradient(160deg, #EEF3FA, #E2EAF6);
}

.gpgpl-xp-tile-ico {
	grid-area: ico;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 11px;
	background: #FCF9F3;
	color: #4A6A34;
	box-shadow: 0 1px 3px rgba(51, 41, 31, 0.1);
}

.gpgpl-xp-tile.is-look .gpgpl-xp-tile-ico {
	color: #2F5F9A;
}

.gpgpl-xp-tile-name {
	grid-area: name;
	overflow: hidden;
	font: 700 0.86rem/1.15 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-xp-tile > small {
	grid-area: sub;
	overflow: hidden;
	font-size: 0.72rem;
	line-height: 1.2;
	color: var(--gpgpl-ink-soft);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-xp-tile-acts {
	grid-area: acts;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	min-width: 0;
	min-height: 34px;
	height: auto;
	margin: 0;
	padding: 0 10px;
	border: none;
	border-radius: 10px;
	box-shadow: none;
	font: 700 0.78rem/1 var(--gpgpl-font-ui);
	white-space: nowrap;
	cursor: pointer;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-go {
	flex: 1 1 auto;
	background: #4A6A34;
	color: #FCF9F3;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .is-look .gpgpl-xp-go {
	background: #2F5F9A;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-go:disabled {
	background: rgba(74, 106, 52, 0.35);
	cursor: default;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-alt {
	background: #FCF9F3;
	color: #38522A;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-x {
	width: 34px;
	padding: 0;
	background: rgba(255, 255, 255, 0.7);
	color: #7A3A2A;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-xp-tile-acts [hidden] {
	display: none;
}

/* Viewpoints already placed: numbered chips to jump back to */
.gpgpl-xp-tile .gpgpl-view-chips {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.gpgpl-xp-tile .gpgpl-view-chips[hidden] {
	display: none;
}

.gpgpl-xp-tile .gpgpl-view-chips-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.gpgpl-xp-tile .gpgpl-view-chip-list {
	display: inline-flex;
	gap: 4px;
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop-explore .gpgpl-view-chip {
	min-width: 34px;
	min-height: 34px;
	padding: 0 6px;
	background: #FCF9F3;
	color: #2F5F9A;
}

/* Night: the strip goes dark with the garden */
.gpgpl-app .gpgpl-design-area.is-view-3d.is-night .gpgpl-pop.gpgpl-pop-explore {
	--gpgpl-ink: #E8EEF7;
	--gpgpl-ink-soft: #A9B9CC;
	background: rgba(22, 35, 58, 0.9);
	color: #E8EEF7;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-xp-tile {
	background: rgba(255, 255, 255, 0.08);
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-xp-tile-ico {
	background: rgba(255, 255, 255, 0.12);
	color: #E8EEF7;
}

.gpgpl-design-area.is-view-3d.is-night .gpgpl-pop-explore .gpgpl-daynight {
	background: rgba(255, 255, 255, 0.1);
}

/* Very narrow phones: the tiles stack, one line each */
@media (max-width: 340px) {
	.gpgpl-xp-tiles {
		grid-template-columns: 1fr;
	}

	.gpgpl-xp-tile {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "ico name acts";
	}

	.gpgpl-xp-tile > small {
		display: none;
	}

	.gpgpl-xp-tile-acts {
		margin-top: 0;
		flex-wrap: nowrap;
	}
}

/* Phones on their side: the strip down the right */
@media (orientation: landscape) and (max-height: 500px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
		gap: 6px;
		padding: 8px 10px 10px;
	}
}

/* Explore (1.72.0): nothing wider than the strip, and slimmer on phones */
.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	overflow-x: hidden;
}

.gpgpl-pop-explore > *,
.gpgpl-xp-seasons,
.gpgpl-xp-seasons > *,
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month,
.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-resting {
	min-width: 0;
	max-width: 100%;
}

.gpgpl-app .gpgpl-pop-explore .gpgpl-scene-month input[type="range"] {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

@media (max-width: 440px) {
	.gpgpl-xp-tile {
		grid-template-areas:
			"ico name"
			"acts acts";
		padding: 8px 9px 9px;
	}

	.gpgpl-xp-tile > small {
		display: none;
	}

	.gpgpl-xp-tile-ico {
		width: 30px;
		height: 30px;
	}

	.gpgpl-xp-tile-acts {
		margin-top: 6px;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
		top: auto;
		bottom: var(--gpgpl-pad-b);
		max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-pad-b));
		overflow-y: auto;
	}
}

.gpgpl-app .gpgpl-design-area .gpgpl-pop.gpgpl-pop-explore {
	align-items: stretch;
}

@media (max-width: 340px) {
	.gpgpl-xp-tile {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "ico name acts";
	}

	.gpgpl-xp-tile-acts {
		margin-top: 0;
		flex-wrap: nowrap;
	}
}

/* ---- 1.75.0: Home's More inside the design's More sheet ---- */
.gpgpl-hub-more-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.gpgpl-hub-more-body > * {
	flex-shrink: 0;
}

.gpgpl-pop-more .gpgpl-hub-more-body {
	margin: 14px -1rem -1rem;
	padding: 16px 1rem calc(1rem + env(safe-area-inset-bottom));
	border-top: 1px solid #E2D6C2;
	background: var(--gpgpl-hub-bg, #F2EADC);
}

/* The design tools above already have these two */
.gpgpl-hub-more-body.is-in-sheet [data-hub-act="info"],
.gpgpl-hub-more-body.is-in-sheet [data-hub-act="download"] {
	display: none !important;
}

.gpgpl-hub-more-body.is-in-sheet .gpgpl-hub-label:first-of-type {
	margin-top: 2px;
}

/* ---- 1.76.0: My designs and your account on Home ---- */
/* A design's details never run under its bell and bin (the site's own
   button styles can stop the text wrapping). */
.gpgpl-app .gpgpl-acc-open,
.gpgpl-app .gpgpl-acc-item-text,
.gpgpl-app .gpgpl-acc-item-text > span {
	white-space: normal;
}

.gpgpl-app .gpgpl-acc-open {
	overflow: hidden;
}

.gpgpl-app .gpgpl-acc-item-text {
	flex: 1 1 auto;
	overflow: hidden;
	overflow-wrap: break-word;
}

.gpgpl-app .gpgpl-acc-item-text > .gpgpl-acc-wx-line {
	white-space: nowrap;
}

.gpgpl-hub-designs .gpgpl-acc-section,
.gpgpl-hub-acc .gpgpl-acc-section {
	margin: 0;
	padding: 0;
	border: 0;
}

.gpgpl-hub-designs .gpgpl-acc-section + .gpgpl-acc-section {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #F2EADC;
}

/* The card's own heading says "My designs" */
.gpgpl-hub-designs .gpgpl-acc-head h4 {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-hub-designs .gpgpl-acc-list {
	margin-bottom: 0.5rem;
}

.gpgpl-hub-acc .gpgpl-acc-actions {
	flex-wrap: wrap;
}

/* 1.79.0: finding the garden on a map is Premium */
.gpgpl-gs-map .gpgpl-gs-map-title .gpgpl-premium-tag {
	display: inline-block;
	width: auto;
	margin-left: 6px;
	vertical-align: 2px;
}

/* =====================================================================
   1.82.0: Measuring the garden's outline (garden-planner.js,
   GPGPLCurves.SideBar and the corner bar's angle in garden-planner-curves.js)
   ===================================================================== */

/* Bare ground under the outline: a tap clears the selection */
.gpgpl-shape-bg-hit {
	fill: transparent;
	pointer-events: auto;
}

.gpgpl-shape-edge-hit {
	cursor: pointer;
}

/* The selected side */
.gpgpl-shape-edge-lit {
	fill: none;
	stroke: var(--gpgpl-gold, #F2B13A);
	stroke-width: 6;
	stroke-linecap: round;
	pointer-events: none;
	opacity: 0.9;
}

/* A number box inside the dark bars */
.gpgpl-bar-field {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	padding: 2px 6px 2px 8px;
	color: #FCF9F3;
	font-family: var(--gpgpl-font-ui);
}

.gpgpl-bar-field-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	opacity: 0.8;
	line-height: 1;
}

.gpgpl-bar-field-row {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.gpgpl-bar-field-row[hidden] {
	display: none;
}

.gpgpl-bar-input {
	width: 4.6em;
	height: 30px;
	padding: 0 6px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.96);
	color: #33291F;
	font: 700 16px/1 var(--gpgpl-font-ui); /* 16px: phones don't zoom in */
	text-align: right;
	-moz-appearance: textfield;
	appearance: textfield;
}

.gpgpl-bar-input-s {
	width: 3.2em;
}

.gpgpl-bar-input::-webkit-outer-spin-button,
.gpgpl-bar-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.gpgpl-bar-input:focus {
	outline: 2px solid var(--gpgpl-gold, #F2B13A);
	outline-offset: 1px;
}

.gpgpl-bar-input:disabled {
	opacity: 0.55;
}

.gpgpl-bar-unit {
	font-size: 0.78rem;
	font-weight: 700;
}

.gpgpl-point-angle {
	display: inline-flex;
	align-items: stretch;
	gap: 2px;
	padding-right: 4px;
	margin-right: 2px;
	border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.gpgpl-point-angle[hidden] {
	display: none;
}

.gpgpl-point-angle .gpgpl-bar-input {
	width: 3.4em;
}

.gpgpl-side-bar {
	align-items: stretch;
}

.gpgpl-side-bar-form {
	display: inline-flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
}

.gpgpl-side-bar.is-invalid {
	animation: gpgpl-bar-shake 0.32s ease;
}

.gpgpl-side-bar.is-invalid .gpgpl-bar-input {
	border-color: #ff8a73;
	box-shadow: 0 0 0 2px rgba(255, 138, 115, 0.6);
}

@keyframes gpgpl-bar-shake {
	0%, 100% { margin-left: 0; }
	25% { margin-left: -6px; }
	75% { margin-left: 6px; }
}

/* Area, the length all the way round, and the overall size */
.gpgpl-shape-stats {
	display: block;
	margin: -0.25rem 0 0.55rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--gpgpl-ink, #33291F);
}

.gpgpl-shape-stats:empty {
	display: none;
}

.gpgpl-shape-template-wrap {
	display: inline-flex;
}

.gpgpl-shape-template {
	height: 38px;
	padding: 0 2rem 0 0.75rem;
	border: 1px solid var(--gpgpl-border);
	border-radius: 999px;
	background-color: var(--gpgpl-paper, #FCF9F3);
	color: var(--gpgpl-ink, #33291F);
	font: 600 0.85rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

@media (max-width: 560px) {
	.gpgpl-shape-hint {
		font-size: 0.75rem;
	}
	.gpgpl-bar-field {
		padding: 2px 4px;
	}
}

/* Phones: the corner bar already has Curved and Delete, so the toolbar
   keeps to what isn't anywhere else (1.82.0) */
@media (max-width: 560px) {
	.gpgpl-design-area .gpgpl-shape-toolbar:not(.gpgpl-feature-toolbar) .gpgpl-shape-remove-point,
	.gpgpl-design-area .gpgpl-shape-toolbar:not(.gpgpl-feature-toolbar) .gpgpl-shape-point-curve {
		display: none;
	}
	.gpgpl-design-area .gpgpl-shape-toolbar:not(.gpgpl-feature-toolbar) .gpgpl-shape-actions {
		gap: 0.4rem;
	}
	.gpgpl-design-area .gpgpl-shape-toolbar:not(.gpgpl-feature-toolbar) .gpgpl-btn {
		min-height: 36px;
		padding: 0 0.75rem;
		font-size: 0.82rem;
	}
	.gpgpl-shape-template {
		height: 36px;
		font-size: 0.82rem;
		max-width: 11.5rem;
	}
}

/* =====================================================================
   Type and colour: roses and the like (1.83.0, garden-planner-pick.js)
   ===================================================================== */

/* The search row: a ring of the group's colours */
.gpgpl-pick-dots {
	position: relative;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: #F2EADC;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.gpgpl-pick-dots i {
	position: absolute;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px #FCF9F3, 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* The picker: a sheet from the bottom on phones, a card on wider screens */
.gpgpl-pick {
	position: fixed;
	inset: 0;
	z-index: 100090;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(51, 41, 31, 0.45);
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	animation: gpgpl-fade-in 0.15s ease-out;
}

@media (min-width: 640px) {
	.gpgpl-pick {
		align-items: center;
		padding: 24px;
	}
}

.gpgpl-pick-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	max-height: 92dvh;
	border-radius: 22px 22px 0 0;
	background: #FCF9F3;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

@media (min-width: 640px) {
	.gpgpl-pick-card {
		border-radius: 22px;
	}
}

.gpgpl-pick-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 0.85rem 0.6rem 1.1rem;
	border-bottom: 1px solid var(--gpgpl-border);
}

.gpgpl-pick-title {
	font: 700 1.15rem/1.25 var(--gpgpl-font-display, inherit);
}

.gpgpl-pick-close {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: #F2EADC;
	color: var(--gpgpl-ink);
	font-size: 26px;
	line-height: 40px;
	cursor: pointer;
}

.gpgpl-pick-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.75rem 1.1rem 0.5rem;
}

/* Live preview: the type's In Flower picture, tinted */
.gpgpl-pick-preview {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 150px;
	margin: 0 0 0.5rem;
	border-radius: 16px;
	background: linear-gradient(#F2EADC, #E2E8D3);
	overflow: hidden;
}

.gpgpl-pick-preview canvas {
	display: none;
	height: 100%;
	width: auto;
}

.gpgpl-pick-preview.has-pic canvas {
	display: block;
}

.gpgpl-pick-preview-dot {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 0 0 0 3px #FCF9F3, 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.15s;
}

.gpgpl-pick-preview:not(.has-pic) .gpgpl-pick-preview-dot {
	right: calc(50% - 32px);
	bottom: calc(50% - 32px);
	width: 64px;
	height: 64px;
}

.gpgpl-pick-types {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 0.9rem;
}

.gpgpl-pick-type {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	min-height: 56px;
	padding: 0.55rem 0.7rem;
	border: 1.5px solid rgba(51, 41, 31, 0.16);
	border-radius: 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.gpgpl-pick-type img {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
}

.gpgpl-pick-type-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gpgpl-pick-type-text strong {
	font-size: 0.95rem;
	line-height: 1.25;
}

.gpgpl-pick-type-text small {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-pick-type.is-on,
.gpgpl-pick-swatch.is-on {
	border-color: var(--gpgpl-leaf);
	background: rgba(74, 106, 52, 0.1);
	box-shadow: inset 0 0 0 1px var(--gpgpl-leaf);
}

.gpgpl-pick-type:focus-visible,
.gpgpl-pick-swatch:focus-visible,
.gpgpl-pick-any:focus-within {
	outline: 3px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-pick-swatches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 0.4rem;
	margin: 0 0 0.9rem;
}

.gpgpl-pick-swatch {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	padding: 0.5rem 0.2rem 0.4rem;
	border: 1.5px solid rgba(51, 41, 31, 0.12);
	border-radius: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	cursor: pointer;
}

.gpgpl-pick-swatch i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.gpgpl-pick-swatch span {
	max-width: 100%;
	font-size: 0.74rem;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: break-word;
}

/* Any colour: the browser's own colour wheel, under the swatch */
.gpgpl-pick-any-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: 0;
	padding: 0;
}

.gpgpl-pick-name {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 0.6rem;
	font-weight: 700;
	font-size: 0.95rem;
}

.gpgpl-pick-name small {
	font-weight: 400;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-pick-name-input {
	width: 100%;
	box-sizing: border-box;
	min-height: 46px;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid rgba(51, 41, 31, 0.18);
	border-radius: 12px;
	font: 400 16px/1.3 var(--gpgpl-font-ui); /* 16px: no zoom on iPhone */
	color: var(--gpgpl-ink);
}

.gpgpl-pick-name-input:focus {
	outline: none;
	border-color: var(--gpgpl-leaf);
	box-shadow: 0 0 0 3px rgba(74, 106, 52, 0.18);
}

.gpgpl-pick-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1.1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--gpgpl-border);
	background: #FCF9F3;
}

.gpgpl-pick-summary {
	min-width: 0;
	font-size: 0.88rem;
	color: var(--gpgpl-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gpgpl-pick-go {
	flex: none;
}

.gpgpl-pick-go:disabled {
	opacity: 0.5;
	cursor: default;
}

/* On a placed plant's card */
.gpgpl-pick-change {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.35rem 0.55rem;
	width: 100%;
	margin: 0.5rem 0 0.25rem;
	padding: 0.55rem 0.7rem;
	border: 1.5px solid rgba(51, 41, 31, 0.14);
	border-radius: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	font-size: 0.88rem;
	text-align: left;
	cursor: pointer;
}

.gpgpl-pick-change[hidden] {
	display: none;
}

.gpgpl-pick-change i {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.gpgpl-pick-change b {
	margin-left: auto;
	color: var(--gpgpl-leaf-dark);
}

/* =====================================================================
   Plant partners (1.84.0, garden-planner-partners.js)
   ===================================================================== */

.gpgpl-pp {
	position: fixed;
	inset: 0;
	z-index: 100090;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	background: rgba(51, 41, 31, 0.45);
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	animation: gpgpl-fade-in 0.15s ease-out;
}

@media (min-width: 640px) {
	.gpgpl-pp { align-items: center; padding: 24px; }
}

.gpgpl-pp-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 480px;
	height: 94vh;
	height: 94dvh;
	border-radius: 22px 22px 0 0;
	background: #F2EADC;
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
	overflow: hidden;
}

@media (min-width: 640px) {
	.gpgpl-pp-card { height: auto; max-height: 90vh; border-radius: 22px; }
}

.gpgpl-pp-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px 8px;
}

.gpgpl-pp-round {
	flex: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(51, 41, 31, 0.08);
	cursor: pointer;
}

.gpgpl-pp-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpgpl-pp-title { margin: 0; font: 700 1.15rem/1.25 var(--gpgpl-font-display, inherit); }
.gpgpl-pp-sub { font-size: 0.8rem; line-height: 1.35; color: #5F5040; }
.gpgpl-pp-tag { align-self: flex-start; font: 600 0.7rem/1 var(--gpgpl-font-ui); letter-spacing: 0.08em; text-transform: uppercase; color: #7A4B0B; background: #FFF1D6; padding: 5px 9px; border-radius: 999px; margin-bottom: 4px; }

.gpgpl-pp-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gpgpl-pp-foot {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
	background: #FCF9F3;
	border-top: 1px solid #E2E8D3;
}

.gpgpl-pp-foot.is-two { flex-direction: row; }
.gpgpl-pp-foot.is-two .gpgpl-pp-go { flex: 1; }
.gpgpl-pp-foot-note { font-size: 0.78rem; color: #5F5040; text-align: center; }

/* Include plants that need winter protection (1.94.0) */
.gpgpl-pp-switch { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 6px 2px; border: 0; background: none; color: var(--gpgpl-ink); text-align: left; font: inherit; cursor: pointer; }
.gpgpl-pp-switch strong { display: block; font: 600 0.88rem var(--gpgpl-font-ui); }
.gpgpl-pp-switch small { display: block; font-size: 0.75rem; color: #5F5040; }
.gpgpl-pp-switch-ui { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: #E2D6C2; transition: background var(--gpgpl-dur) ease; }
.gpgpl-pp-switch-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FCF9F3; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform var(--gpgpl-dur) var(--gpgpl-ease); }
.gpgpl-pp-switch[aria-checked="true"] .gpgpl-pp-switch-ui { background: var(--gpgpl-leaf); }
.gpgpl-pp-switch[aria-checked="true"] .gpgpl-pp-switch-ui::after { transform: translateX(18px); }
.gpgpl-pp-switch:focus-visible { outline: none; }
.gpgpl-pp-switch:focus-visible .gpgpl-pp-switch-ui { outline: 2px solid var(--gpgpl-gold); outline-offset: 2px; }
.gpgpl-pp-tags > span.is-tender, .gpgpl-pp-tags > span.is-tender svg { color: #2F6690; }

.gpgpl-pp-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 18px;
	border: 0;
	border-radius: 16px;
	background: #4A6A34;
	color: #FCF9F3;
	font: 600 0.95rem var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-pp-go.is-dark { background: var(--gpgpl-leaf-dark, #33291F); }
.gpgpl-pp-go.is-dark svg { color: var(--gpgpl-gold, #E0B04A); }
.gpgpl-pp-go.is-ghost { background: #FCF9F3; color: var(--gpgpl-ink); box-shadow: inset 0 0 0 1.5px #E2E8D3; }
.gpgpl-pp-go:disabled { opacity: 0.5; cursor: default; }

.gpgpl-pp-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: none; }
.gpgpl-pp-pill { flex: none; min-height: 38px; padding: 0 14px; border: 1.5px solid #E2E8D3; border-radius: 999px; background: #FCF9F3; color: var(--gpgpl-ink); font: 600 0.82rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-pp-pill.is-on { background: var(--gpgpl-leaf-dark, #33291F); border-color: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; }

.gpgpl-pp-plant,
.gpgpl-pp-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border-radius: 18px;
	background: #FCF9F3;
	border: 1.5px solid #E2E8D3;
	flex: none;
}

.gpgpl-pp-box.is-flush { padding: 0 0 12px; overflow: hidden; }
.gpgpl-pp-box.is-flush .gpgpl-pp-whys { padding: 0 12px; }
.gpgpl-pp-boxhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gpgpl-pp-boxhead span { font: 600 0.78rem var(--gpgpl-font-ui); color: #38522A; }

.gpgpl-pp-plant-top,
.gpgpl-pp-row { display: flex; align-items: center; gap: 12px; }
.gpgpl-pp-plant-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gpgpl-pp-plant-text strong { font: 600 0.98rem/1.25 var(--gpgpl-font-display, inherit); }
.gpgpl-pp-plant-text small { font-size: 0.78rem; line-height: 1.35; color: #5F5040; }
.gpgpl-pp-role { font: 700 0.68rem var(--gpgpl-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #5F5040; }

.gpgpl-pp-thumb { position: relative; flex: none; width: 52px; height: 52px; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #F2EADC; }
.gpgpl-pp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gpgpl-pp-thumb i { width: 20px; height: 20px; border-radius: 50%; }

.gpgpl-pp-add { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: #4A6A34; color: #FCF9F3; font: 600 0.88rem var(--gpgpl-font-ui); cursor: pointer; }

.gpgpl-pp-whys { display: flex; flex-wrap: wrap; gap: 6px; }
.gpgpl-pp-why {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 32px;
	padding: 5px 10px;
	border: 0;
	border-radius: 999px;
	background: #F2EADC;
	color: #38522A;
	font: 500 0.78rem/1.25 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
}
.gpgpl-pp-why svg { flex: none; color: #4A6A34; }
.gpgpl-pp-why.is-colour { background: #FFF1D6; color: #4A3200; }
.gpgpl-pp-why-dots { display: inline-flex; }
.gpgpl-pp-why-dots i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px #FCF9F3; }
.gpgpl-pp-why-dots i + i { margin-left: -3px; }

.gpgpl-pp-locked { position: relative; }
.gpgpl-pp-locked .gpgpl-pp-plant-top { filter: blur(3px); }
.gpgpl-pp-locked .gpgpl-pp-plant-text i { display: block; height: 12px; width: 70%; border-radius: 6px; background: #E2D6C2; }
.gpgpl-pp-locked .gpgpl-pp-plant-text i + i { width: 45%; }
.gpgpl-pp-premium { align-self: center; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gpgpl-gold, #E0B04A); color: #3D2600; font: 600 0.88rem var(--gpgpl-font-ui); cursor: pointer; }

.gpgpl-pp-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1.5px solid #F2C46B;
	border-radius: 16px;
	background: #FFFBF2;
	color: #4A3A1A;
	font: 400 0.82rem/1.4 var(--gpgpl-font-ui);
	text-align: left;
	cursor: pointer;
	flex: none;
}
.gpgpl-pp-banner strong { display: block; color: var(--gpgpl-ink); font-size: 0.88rem; }
.gpgpl-pp-banner svg { flex: none; color: #B07400; }

.gpgpl-pp-empty, .gpgpl-pp-note { margin: 4px 0; font-size: 0.88rem; line-height: 1.45; color: #5F5040; }
.gpgpl-pp-lead { margin: 0; font-size: 0.95rem; line-height: 1.55; color: #38522A; }
.gpgpl-pp-h3 { margin: 0; font: 700 0.95rem var(--gpgpl-font-ui); }
.gpgpl-pp-q { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font: 700 0.95rem var(--gpgpl-font-ui); }
.gpgpl-pp-q b { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: #4A6A34; color: #FCF9F3; font-size: 0.78rem; align-items: center; justify-content: center; }
.gpgpl-pp-q small { font-weight: 400; color: #5F5040; }

.gpgpl-pp-tip {
	display: flex;
	gap: 12px;
	padding: 14px;
	border-radius: 16px;
	background: var(--gpgpl-leaf-dark, #33291F);
	color: #FCF9F3;
	font-size: 0.88rem;
	line-height: 1.45;
	flex: none;
}
.gpgpl-pp-tip svg { flex: none; color: var(--gpgpl-gold, #E0B04A); }
.gpgpl-pp-tip.is-light { background: #FFF6E2; color: #4A3A1A; }
.gpgpl-pp-tip.is-light svg { color: #9A5B00; }

.gpgpl-pp-link { align-self: flex-start; padding: 6px 0; min-height: 32px; border: 0; background: none; color: #38522A; font: 600 0.85rem var(--gpgpl-font-ui); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gpgpl-pp-link.is-block { align-self: center; }
.gpgpl-pp-ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-radius: 14px; background: #EAE9D8; font-size: 0.86rem; line-height: 1.4; }
.gpgpl-pp-ok svg { color: #4A6A34; flex: none; }

/* The colour wheel */
.gpgpl-pp-wheel { position: relative; flex: none; align-self: center; margin: 4px auto; }
.gpgpl-pp-wheel-ring { position: absolute; inset: 0; border-radius: 50%; transform: rotate(-15deg); }
.gpgpl-pp-wheel-hole { position: absolute; border-radius: 50%; background: #F2EADC; }
.gpgpl-pp-box .gpgpl-pp-wheel-hole { background: #FCF9F3; }
.gpgpl-pp-wheel-line { position: absolute; height: 3px; margin-top: -1.5px; background: var(--gpgpl-ink); transform-origin: 0 50%; border-radius: 2px; }
.gpgpl-pp-wheel-dot { position: absolute; border-radius: 50%; box-shadow: 0 0 0 3px #FCF9F3, 0 2px 8px rgba(0, 0, 0, 0.25); }
.gpgpl-pp-wheel-mid { position: absolute; left: 50%; top: 50%; width: 26%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 1px #E2E8D3; }

.gpgpl-pp-recipes { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-pp-recipe { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: #FCF9F3; border: 1.5px solid #E2E8D3; }
.gpgpl-pp-recipe strong { display: block; font-size: 0.9rem; }
.gpgpl-pp-recipe small { font-size: 0.8rem; color: #5F5040; }
.gpgpl-pp-dots { display: flex; flex: none; }
.gpgpl-pp-dots i { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px #FCF9F3; }
.gpgpl-pp-dots i + i { margin-left: -7px; }

/* Sun and soil */
.gpgpl-pp-opts { display: grid; gap: 8px; }
.gpgpl-pp-opts.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gpgpl-pp-opts.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gpgpl-pp-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; min-height: 76px; padding: 10px 4px; border: 1.5px solid #E2E8D3; border-radius: 14px; background: #FCF9F3; color: var(--gpgpl-ink); font: inherit; cursor: pointer; }
.gpgpl-pp-opt strong { font-size: 0.84rem; }
.gpgpl-pp-opt small { font-size: 0.72rem; line-height: 1.25; color: #5F5040; text-align: center; }
.gpgpl-pp-opt.is-on, .gpgpl-pp-place.is-on, .gpgpl-pp-look.is-on { border-color: #4A6A34; background: #EAE9D8; box-shadow: inset 0 0 0 1px #4A6A34; }
.gpgpl-pp-soil { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.gpgpl-pp-sun { position: relative; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.gpgpl-pp-sun.is-sun { background: #F2B13A; box-shadow: 0 0 0 4px #FFE7B0; }
.gpgpl-pp-sun.is-part { background: linear-gradient(90deg, #F2B13A 50%, #E2D6C2 50%); }
.gpgpl-pp-sun.is-shade { background: #7A6A58; }
.gpgpl-pp-sun.is-none { background: #E2E8D3; }

/* Builder */
.gpgpl-pp-places, .gpgpl-pp-looks { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-pp-place, .gpgpl-pp-look { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; border: 1.5px solid #E2E8D3; border-radius: 16px; background: #FCF9F3; color: var(--gpgpl-ink); font: inherit; text-align: left; cursor: pointer; }
.gpgpl-pp-place strong, .gpgpl-pp-look strong { display: block; font-size: 0.92rem; }
.gpgpl-pp-place small, .gpgpl-pp-look small { display: block; font-size: 0.78rem; line-height: 1.35; color: #5F5040; }
.gpgpl-pp-bedsw { flex: none; width: 36px; height: 36px; border-radius: 10px; background: #B98B5E; }
.gpgpl-pp-bedsw.is-garden { background: #8FA46A; }
.gpgpl-pp-seeds { display: flex; flex-wrap: wrap; gap: 8px; }
.gpgpl-pp-seed { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 8px; border: 1.5px solid #E2E8D3; border-radius: 999px; background: #FCF9F3; color: var(--gpgpl-ink); font: 600 0.85rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-pp-seed i { width: 24px; height: 24px; border-radius: 50%; }
.gpgpl-pp-seed.is-on { border-color: #4A6A34; background: #EAE9D8; }

/* The group */
.gpgpl-pp-side { position: relative; height: 200px; background: linear-gradient(#F2EADC, #E2E8D3); overflow: hidden; }
.gpgpl-pp-layer { position: absolute; left: 6%; right: 6%; height: 160px; }
.gpgpl-pp-stem { position: absolute; bottom: 0; width: 26px; margin-left: -13px; border-radius: 13px 13px 2px 2px; background: linear-gradient(to top, #4A6A34 0, #8FA46A 55%, var(--c) 56%, var(--c) 100%); }
.gpgpl-pp-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #B98B5E; z-index: 9; }
.gpgpl-pp-side-label { position: absolute; left: 10px; z-index: 10; font: 700 0.7rem var(--gpgpl-font-ui); color: var(--gpgpl-ink); background: rgba(255, 255, 255, 0.85); padding: 2px 7px; border-radius: 999px; }

.gpgpl-pp-colours { display: flex; align-items: center; gap: 14px; }
.gpgpl-pp-colours p { margin: 0; font-size: 0.86rem; line-height: 1.45; color: #38522A; }
.gpgpl-pp-colours .gpgpl-pp-wheel { margin: 0; }

.gpgpl-pp-months, .gpgpl-pp-bars, .gpgpl-pp-gapbar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; }
.gpgpl-pp-months span { font: 600 0.66rem var(--gpgpl-font-ui); color: #5F5040; text-align: center; }
.gpgpl-pp-bars span { height: 12px; border-radius: 3px; background: #F2EADC; }
.gpgpl-pp-gapbar span { height: 8px; border-radius: 3px; background: #E2D6C2; }
.gpgpl-pp-gapbar span.is-on { background: #7C5CC4; }
.gpgpl-pp-gapbar span.is-gap { background: repeating-linear-gradient(90deg, #F2A93B 0 4px, #FFE7B8 4px 8px); }

/* Check this bed */
.gpgpl-pp-score { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 18px; background: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; flex: none; }
.gpgpl-pp-score strong { display: block; font: 600 1rem var(--gpgpl-font-display, inherit); }
.gpgpl-pp-score small { display: block; font-size: 0.82rem; line-height: 1.4; color: #E0E7D1; }
.gpgpl-pp-ring { position: relative; flex: none; width: 64px; height: 64px; border-radius: 50%; }
.gpgpl-pp-ring b { position: absolute; inset: 8px; border-radius: 50%; background: var(--gpgpl-leaf-dark, #33291F); display: flex; align-items: center; justify-content: center; font: 700 1.05rem var(--gpgpl-font-display, inherit); }
.gpgpl-pp-check { display: flex; gap: 12px; padding: 14px; border-radius: 16px; background: #FCF9F3; border: 1.5px solid #E2E8D3; flex: none; }
.gpgpl-pp-check.is-warn { border-color: #F2C46B; background: #FFFBF2; }
.gpgpl-pp-check-ico { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E2E8D3; color: #4A6A34; }
.gpgpl-pp-check.is-warn .gpgpl-pp-check-ico { background: #FFE7B8; color: #8A4F00; }
.gpgpl-pp-check-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.gpgpl-pp-check-text strong { font-size: 0.92rem; }
.gpgpl-pp-check-text > span { font-size: 0.84rem; line-height: 1.4; color: #5F5040; }
.gpgpl-pp-check.is-warn .gpgpl-pp-check-text > span { color: #4A3A1A; }
.gpgpl-pp-fix { align-self: flex-start; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; font: 600 0.84rem var(--gpgpl-font-ui); cursor: pointer; }

/* On a plant's card */
.gpgpl-pp-cardbox { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.gpgpl-pp-cardbox[hidden] { display: none; }
.gpgpl-pp-fit { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; background: #F2EADC; }
.gpgpl-pp-fit strong { font-size: 0.88rem; }
.gpgpl-pp-fit ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gpgpl-pp-fit li { display: flex; align-items: center; gap: 8px; font-size: 0.84rem; }
.gpgpl-pp-fit li i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #E2E8D3; color: #4A6A34; }
.gpgpl-pp-fit li.is-warn i { background: #FFE7B8; color: #8A4F00; }
.gpgpl-pp-cardbtn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 12px 14px; border: 0; border-radius: 16px; background: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; font: inherit; text-align: left; cursor: pointer; }
.gpgpl-pp-cardbtn-dots { display: flex; flex: none; }
.gpgpl-pp-cardbtn-dots i { width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--gpgpl-leaf-dark, #33291F); }
.gpgpl-pp-cardbtn-dots i + i { margin-left: -8px; }
.gpgpl-pp-cardbtn-text { flex: 1; min-width: 0; }
.gpgpl-pp-cardbtn-text strong { display: block; font: 600 0.95rem var(--gpgpl-font-display, inherit); }
.gpgpl-pp-cardbtn-text small { display: block; font-size: 0.78rem; color: #E0E7D1; }

/* On a bed's card */
.gpgpl-pp-bedrow { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 4px; }
.gpgpl-pp-bedrow[hidden] { display: none; }
.gpgpl-pp-bedspot { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 12px; border: 1.5px solid #E2E8D3; border-radius: 14px; background: #FCF9F3; color: var(--gpgpl-ink); font: inherit; text-align: left; cursor: pointer; }
.gpgpl-pp-bedspot span:nth-child(2) { flex: 1; }
.gpgpl-pp-bedspot small { display: block; font-size: 0.72rem; color: #5F5040; }
.gpgpl-pp-bedspot strong { display: block; font-size: 0.88rem; }
.gpgpl-pp-bedbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gpgpl-pp-bedbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: #EAE9D8; color: #33291F; font: 600 0.82rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-pp-bedbtn svg { width: 16px; height: 16px; }
.gpgpl-pp-star { color: #B07400; }
.gpgpl-pp-link.is-light { color: var(--gpgpl-gold, #E0B04A); padding: 0; min-height: 0; }

/* Plant partners 1.84.1: the plants' own cut-outs in the group's side view */
.gpgpl-pp-side { height: 230px; }
.gpgpl-pp-layer { height: 200px; left: 4%; right: 4%; }
.gpgpl-pp-cut { position: absolute; bottom: 0; display: block; transform: translateX(-50%); }
.gpgpl-pp-cut img { display: block; height: 100%; width: auto; max-width: none; filter: drop-shadow(0 3px 3px rgba(51, 41, 31, 0.18)); }
.gpgpl-pp-cut-tint { position: absolute; inset: 0; mix-blend-mode: multiply; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.gpgpl-pp-tiers { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px 0; }
.gpgpl-pp-tiers span { font-size: 0.76rem; line-height: 1.3; padding: 5px 9px; border-radius: 999px; background: #F2EADC; color: #38522A; }
.gpgpl-pp-tiers b { font-weight: 700; text-transform: uppercase; font-size: 0.66rem; letter-spacing: 0.06em; color: #5F5040; margin-right: 3px; }
.gpgpl-pp-credits { margin: 0; padding: 0 12px; font-size: 0.68rem; line-height: 1.4; color: #5F5040; }
.gpgpl-pp-credits a { color: inherit; }
.gpgpl-pp-combos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: none; }
.gpgpl-pp-combos > span { font: 700 0.72rem var(--gpgpl-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: #5F5040; margin-right: auto; }
.gpgpl-pp-combo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1.5px solid #E2E8D3; border-radius: 999px; background: #FCF9F3; color: var(--gpgpl-ink); font: 600 0.84rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-pp-combo-btn.is-main { border-color: var(--gpgpl-leaf-dark, #33291F); background: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; }

/* Fences (1.85.0): style chips and colours on a fence's card */
.gpgpl-feature-materials .gpgpl-fence-style {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px 0 6px;
	border: 1.5px solid #E2E8D3;
	border-radius: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 600 0.82rem var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-feature-materials .gpgpl-fence-style.is-active { border-color: #4A6A34; background: #EAE9D8; box-shadow: inset 0 0 0 1px #4A6A34; }
.gpgpl-fence-style-sw { width: 30px; height: 30px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); flex: none; }
.gpgpl-fence-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 2px; }
.gpgpl-fence-options[hidden] { display: none; }
.gpgpl-fence-options .gpgpl-feature-size-label b { font-weight: 600; color: #5F5040; margin-left: 4px; }
.gpgpl-fence-colours { display: flex; flex-wrap: wrap; gap: 8px; }
.gpgpl-fence-colour { position: relative; width: 36px; height: 36px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.gpgpl-fence-colour.is-active { box-shadow: 0 0 0 3px #FCF9F3, 0 0 0 5px #4A6A34; }
.gpgpl-fence-colour:disabled { opacity: 0.5; cursor: default; }
.gpgpl-fence-colour.is-any input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.gpgpl-fence-decor { pointer-events: none; }
.gpgpl-feature-materials:has(.gpgpl-fence-style) { flex-wrap: wrap; overflow: visible; }
.gpgpl-feature-materials .gpgpl-fence-style { padding: 0 10px 0 5px; font-size: 0.8rem; }
.gpgpl-fence-options .gpgpl-feature-size-label b { text-transform: none; letter-spacing: 0; }

/* Plant partners 1.87.0: "Anything else?" choices, and little labels */
.gpgpl-pp-wants { display: flex; flex-wrap: wrap; gap: 8px; }
.gpgpl-pp-want { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 12px; border: 1.5px solid #E2E8D3; border-radius: 999px; background: #FCF9F3; color: var(--gpgpl-ink); font: 600 0.85rem var(--gpgpl-font-ui); cursor: pointer; }
.gpgpl-pp-want svg { color: #4A6A34; flex: none; }
.gpgpl-pp-want.is-on { border-color: #4A6A34; background: #EAE9D8; box-shadow: inset 0 0 0 1px #4A6A34; }
.gpgpl-pp-want:focus-visible { outline: 2px solid #4A6A34; outline-offset: 2px; }
.gpgpl-pp-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.gpgpl-pp-tags > span, .gpgpl-pp-tag-role { display: inline-flex; align-items: center; gap: 4px; font: 600 0.72rem var(--gpgpl-font-ui); color: #38522A; }
.gpgpl-pp-tags svg { width: 13px; height: 13px; color: #4A6A34; flex: none; }
.gpgpl-pp-tag-role { border: 0; background: #EAE9D8; border-radius: 999px; padding: 2px 8px; cursor: pointer; min-height: 24px; }
.gpgpl-pp-tag-role.is-dominant { background: #FFF1D6; color: #5A3B00; }
.gpgpl-pp-tag-role.is-dominant svg { color: #D08A10; }
.gpgpl-pp-box > .gpgpl-pp-whys { margin-top: 10px; }

/* =====================================================================
   1.90.0: the 2D / 3D switch top right, the Plants list, and the plant
   card made simple (garden-planner-card.js)
   ===================================================================== */

/* ---- 2D / 3D: under Undo, the same place in Plan and 3D ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-undo-btn {
	order: 1;
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-view-switch.gpgpl-view-float.is-top {
	order: 2;
	position: relative;
	right: auto;
	bottom: auto;
	left: auto;
	top: auto;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
	width: 48px;
	height: 96px;
	padding: 4px;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
}

.gpgpl-top-actions .gpgpl-view-float.is-top .gpgpl-view-thumb {
	width: calc(100% - 8px);
	height: calc(50% - 4px);
	border-radius: 12px;
}

.gpgpl-design-area.is-view-3d .gpgpl-top-actions .gpgpl-view-float.is-top .gpgpl-view-thumb {
	transform: translateY(100%);
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-view-float.is-top .gpgpl-view-btn {
	flex-direction: column;
	gap: 1px;
	padding: 0;
	border-radius: 12px;
	font-size: 0.74rem;
}

.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-view-float.is-top .gpgpl-view-btn svg {
	width: 15px;
	height: 15px;
}

/* It stays put (just fades) while a card or sheet is open, so nothing jumps */
@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-view-switch.gpgpl-view-float.is-top {
		width: 44px;
		height: 92px;
	}
}

@media (orientation: landscape) and (max-height: 500px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-view-switch.gpgpl-view-float.is-top {
		width: 44px;
		height: 84px;
	}
}

/* The month chip in 3D has the bottom of the screen to itself now */
.gpgpl-month-chip {
	max-width: calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r));
}

/* ---- The Plants button, above the dock on the left ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-key-pill {
	position: absolute;
	left: var(--gpgpl-pad-l);
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 12px);
	z-index: 19;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 44px;
	margin: 0;
	padding: 0 14px 0 12px;
	border: none;
	border-radius: 999px;
	background: var(--gpgpl-glass, rgba(255, 255, 255, 0.94));
	box-shadow: var(--gpgpl-float-shadow, 0 4px 14px rgba(51, 41, 31, 0.16));
	color: var(--gpgpl-ink);
	font: 700 0.9rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gpgpl-app .gpgpl-design-area .gpgpl-key-pill svg {
	color: #4A6A34;
	flex: none;
}

.gpgpl-key-pill-count {
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	box-sizing: border-box;
	border-radius: 999px;
	background: #E2E8D3;
	color: #38522A;
	font-size: 0.8rem;
	line-height: 24px;
	text-align: center;
}

.gpgpl-app .gpgpl-design-area .gpgpl-key-pill:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-app .gpgpl-design-area .gpgpl-key-pill[hidden],
.gpgpl-design-area.is-view-3d .gpgpl-key-pill,
.gpgpl-design-area.is-feature-drawing .gpgpl-key-pill,
.gpgpl-design-area.is-shape-editing .gpgpl-key-pill,
.gpgpl-design-area.has-card .gpgpl-key-pill,
.gpgpl-design-area.has-selbar .gpgpl-key-pill,
.gpgpl-design-area:has(.gpgpl-feature-panel:not([hidden])) .gpgpl-key-pill,
.gpgpl-design-area:has(.gpgpl-pop.is-open) .gpgpl-key-pill,
.gpgpl-design-area.is-walking .gpgpl-key-pill,
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-key-pill {
	display: none !important;
}

/* ---- The Plants list: a sheet from the bottom ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-key-sheet {
	position: absolute;
	z-index: 31;
	left: 50%;
	bottom: calc(var(--gpgpl-dock-h) + var(--gpgpl-pad-b) + 12px);
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: min(440px, calc(100% - var(--gpgpl-pad-l) - var(--gpgpl-pad-r)));
	max-height: min(70%, 560px);
	padding: 14px 14px 10px;
	border-radius: 22px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	box-shadow: 0 -6px 30px rgba(51, 41, 31, 0.22);
	transform: translateX(-50%);
	animation: gpgpl-card-in var(--gpgpl-dur, 0.2s) var(--gpgpl-ease, ease);
}

.gpgpl-app .gpgpl-design-area .gpgpl-key-sheet[hidden],
.gpgpl-design-area.is-view-3d .gpgpl-key-sheet {
	display: none;
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-key-sheet {
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		max-height: 78%;
		padding: 16px 16px calc(12px + env(safe-area-inset-bottom));
		border-radius: 24px 24px 0 0;
		transform: none;
	}
}

.gpgpl-key-sheet-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.gpgpl-key-sheet-head > div {
	flex: 1;
	min-width: 0;
}

.gpgpl-app .gpgpl-key-sheet-title {
	margin: 0;
	font: 600 1.1rem/1.2 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

.gpgpl-app .gpgpl-key-sheet-sub {
	margin: 2px 0 0;
	font-size: 0.82rem;
	color: #5F5040;
}

.gpgpl-app .gpgpl-key-sheet-done {
	flex: none;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: none;
	border-radius: 999px;
	background: #4A6A34;
	color: #FCF9F3;
	font: 700 0.95rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-app .gpgpl-key-sheet-find {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 44px;
	margin: 12px 0 10px;
	padding: 0 12px;
	border-radius: 14px;
	background: #F2EADC;
	color: #5F5040;
}

.gpgpl-app .gpgpl-key-sheet-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--gpgpl-ink);
	font: 400 16px/1 var(--gpgpl-font-ui); /* 16px: no zoom on iPhones */
	outline: none;
	box-shadow: none;
}

.gpgpl-key-sheet-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.gpgpl-app .gpgpl-key-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 8px 12px;
	border: none;
	border-radius: 14px;
	background: #FAF6EE;
	color: var(--gpgpl-ink);
	text-align: left;
	font: inherit;
	cursor: pointer;
}

.gpgpl-app .gpgpl-key-row:hover {
	background: #EAE9D8;
}

.gpgpl-app .gpgpl-key-row:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

.gpgpl-key-row .gpgpl-key-num {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: #FCF9F3;
	font-size: 0.85rem;
	font-weight: 800;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.gpgpl-key-row-text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.gpgpl-key-row-name {
	font-weight: 700;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

.gpgpl-key-row-common {
	font-size: 0.8rem;
	color: #5F5040;
}

.gpgpl-key-row .gpgpl-key-count {
	flex: none;
	font-size: 0.82rem;
	font-weight: 700;
	color: #5F5040;
}

.gpgpl-key-row-status {
	flex: none;
	padding: 3px 8px;
	border-radius: 999px;
	background: #EEF1F4;
	color: #44505C;
	font-size: 0.74rem;
	font-weight: 700;
}

.gpgpl-key-row-status.is-planted {
	background: #E2E8D3;
	color: #38522A;
}

.gpgpl-app .gpgpl-key-sheet-tip {
	margin: 6px 0 2px;
	text-align: center;
	font-size: 0.82rem;
	color: #5F5040;
}

/* ---- The plant card ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-selected-panel.gpgpl-card-v2:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 14px 14px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
}

@media (orientation: portrait) and (max-width: 700px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-selected-panel.gpgpl-card-v2 {
		max-height: calc(100% - var(--gpgpl-pad-t) - var(--gpgpl-pad-b) - var(--gpgpl-ctl) - 7rem);
		border-radius: 22px;
	}
}

.gpgpl-card-v2 > * {
	flex-shrink: 0;
	order: 30;
	margin-top: 0;
	margin-bottom: 0;
}

/* Which page each part is on. Home and the drawn pages list theirs; the
   "Right spot?" page takes anything else, so nothing added later is lost. */
.gpgpl-card-v2[data-page="home"] > :not(.gpgpl-card-top):not(.gpgpl-info-credit):not(.gpgpl-planted):not(.gpgpl-card-facts):not(.gpgpl-card-tools),
.gpgpl-card-v2[data-page="jobs"] > :not(.gpgpl-card-top):not(.gpgpl-card-jobs),
.gpgpl-card-v2[data-page="plant"] > :not(.gpgpl-card-top):not(.gpgpl-card-plant),
.gpgpl-card-v2[data-page="edit"] > :not(.gpgpl-card-top):not(.gpgpl-selected-actions):not(.gpgpl-pick-change):not(.gpgpl-prune):not(.gpgpl-card-edit-tip),
.gpgpl-card-v2[data-page="spot"] > :is(.gpgpl-info-credit, .gpgpl-planted, .gpgpl-card-facts, .gpgpl-card-tools, .gpgpl-card-jobs, .gpgpl-card-plant, .gpgpl-selected-actions, .gpgpl-pick-change, .gpgpl-prune, .gpgpl-card-edit-tip, .gpgpl-grow-card),
.gpgpl-card-v2 > .gpgpl-grow-card,
.gpgpl-card-v2 > [hidden] {
	display: none !important;
}

.gpgpl-card-v2 > .gpgpl-card-top { order: 0; }
.gpgpl-card-v2 > .gpgpl-info-credit { order: 1; }
.gpgpl-card-v2 > .gpgpl-planted { order: 2; }
.gpgpl-card-v2 > .gpgpl-card-facts { order: 3; }
.gpgpl-card-v2 > .gpgpl-card-tools { order: 4; }
.gpgpl-card-v2 > .gpgpl-pp-cardbox { order: 5; }
.gpgpl-card-v2 > .gpgpl-info-climate { order: 6; }
.gpgpl-card-v2 > .gpgpl-card-more-head { order: 7; }
.gpgpl-card-v2 > .gpgpl-info-details { order: 8; }
.gpgpl-card-v2 > .gpgpl-info-link,
.gpgpl-card-v2 > .gpgpl-info-none { order: 9; }
.gpgpl-card-v2 > .gpgpl-info-care,
.gpgpl-card-v2 > .gpgpl-info-make-care,
.gpgpl-card-v2 > .gpgpl-info-photo { order: 10; }
.gpgpl-card-v2 > .gpgpl-selected-actions { order: 5; }
.gpgpl-card-v2 > .gpgpl-pick-change { order: 6; }
.gpgpl-card-v2 > .gpgpl-prune { order: 7; }
.gpgpl-card-v2 > .gpgpl-card-edit-tip { order: 8; }

/* The top: name and Done always in view; Back on the other pages */
.gpgpl-card-v2 .gpgpl-card-top {
	position: sticky;
	top: 0;
	z-index: 3;
	margin: 0 -14px;
	padding: 12px 14px 0;
	background: #FCF9F3;
	border-radius: 22px 22px 0 0;
}

.gpgpl-card-v2 .gpgpl-selected-panel-header {
	gap: 10px;
	min-height: 48px;
}

.gpgpl-card-v2 .gpgpl-info-thumb {
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 12px;
	object-fit: cover;
}

.gpgpl-card-v2 .gpgpl-selected-name {
	font-size: 1.02rem;
	line-height: 1.25;
}

.gpgpl-card-v2 .gpgpl-selected-spread {
	font-size: 0.82rem;
	color: #5F5040;
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-info-close.gpgpl-card-done {
	height: 44px;
	padding: 0 18px;
	background: #4A6A34;
	font-size: 0.95rem;
	line-height: 44px;
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-info-close.gpgpl-card-done:hover {
	background: #38522A;
}

.gpgpl-card-back {
	display: none;
	align-items: center;
	gap: 4px;
	margin: 8px -8px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid #F2EADC;
}

.gpgpl-card-v2:not([data-page="home"]) .gpgpl-card-back {
	display: flex;
}

.gpgpl-app .gpgpl-card-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 44px;
	margin: 0;
	padding: 0 10px 0 6px;
	border: none;
	border-radius: 12px;
	background: transparent;
	color: #38522A;
	font: 700 0.92rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-app .gpgpl-card-back-btn:hover {
	background: #F2EADC;
}

.gpgpl-app .gpgpl-card-page-title {
	margin: 0;
	font: 600 1rem/1.2 var(--gpgpl-font-display);
	color: var(--gpgpl-ink);
}

/* Planned / Planted: one clear switch */
.gpgpl-card-v2 > .gpgpl-planted {
	gap: 6px;
	margin: 0;
	padding: 0;
	background: transparent;
}

.gpgpl-card-v2 .gpgpl-planted-label {
	font-size: 0.82rem;
	color: #5F5040;
}

.gpgpl-card-v2 .gpgpl-planted-seg {
	padding: 4px;
	border: none;
	border-radius: 14px;
	background: #F2EADC;
}

.gpgpl-card-v2 .gpgpl-planted-seg button {
	min-height: 40px;
	border-radius: 11px;
	font-weight: 700;
	font-size: 0.9rem;
	color: #33291F;
}

.gpgpl-card-v2 .gpgpl-planted-seg button[aria-checked="true"] {
	background: #FCF9F3;
	color: #38522A;
	box-shadow: 0 1px 3px rgba(51, 41, 31, 0.18);
}

.gpgpl-card-v2 .gpgpl-planted-seg button[data-planted-set="planned"][aria-checked="true"] {
	background: #FCF9F3;
	color: #44505C;
}

.gpgpl-card-v2 .gpgpl-planted-note {
	display: none;
}

/* Quick facts */
.gpgpl-card-facts {
	display: grid;
	grid-template-columns: repeat(var(--gpgpl-facts, 4), minmax(0, 1fr));
	gap: 6px;
}

.gpgpl-card-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding: 6px 4px;
	border-radius: 14px;
	background: #F2EADC;
	text-align: center;
}

.gpgpl-card-fact b {
	font-size: 0.9rem;
	line-height: 1.15;
}

.gpgpl-card-fact.is-small b {
	font-size: 0.8rem;
}

.gpgpl-card-fact small {
	margin-top: 2px;
	font-size: 0.7rem;
	line-height: 1.15;
	color: #5F5040;
}

.gpgpl-card-fact.is-warn {
	background: #FFF1E8;
}

.gpgpl-card-fact.is-warn b {
	color: #A63D17;
}

/* The tools: big, labelled, all in view */
.gpgpl-card-tools {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.gpgpl-app .gpgpl-card-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 78px;
	margin: 0;
	padding: 8px 4px;
	border: 1px solid #E2D6C2;
	border-radius: 16px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, transform 0.12s ease;
}

.gpgpl-app .gpgpl-card-tool:hover {
	background: #FAF6EE;
}

.gpgpl-app .gpgpl-card-tool:active {
	transform: scale(0.97);
}

.gpgpl-app .gpgpl-card-tool:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-card-tool-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
}

.gpgpl-card-tool.is-partners .gpgpl-card-tool-ico { background: #F3E9F7; color: #7A3F99; }
.gpgpl-card-tool.is-grow .gpgpl-card-tool-ico { background: #E2E8D3; color: #38522A; }
.gpgpl-card-tool.is-jobs .gpgpl-card-tool-ico { background: #FCEBDD; color: #A84A1C; }
.gpgpl-card-tool.is-plant .gpgpl-card-tool-ico { background: #F5EDDF; color: #7C5A22; }
.gpgpl-card-tool.is-spot .gpgpl-card-tool-ico { background: #FFF4D6; color: #8A6400; }
.gpgpl-card-tool.is-edit .gpgpl-card-tool-ico { background: #EEF1F4; color: #3D4A57; }

.gpgpl-card-tool-label {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
}

.gpgpl-card-tool-badge,
.gpgpl-card-tool-warn {
	position: absolute;
	top: 6px;
	right: 6px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 10px;
	background: #B8471A;
	color: #FCF9F3;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 20px;
	text-align: center;
}

.gpgpl-card-tool-warn {
	background: #B07A00;
}

/* The pages */
.gpgpl-app .gpgpl-card-sub-h {
	margin: 4px 0 0;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5F5040;
}

.gpgpl-app .gpgpl-card-note {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.45;
	color: #33291F;
}

.gpgpl-card-jobs,
.gpgpl-card-plant {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.gpgpl-card-joblist {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.gpgpl-card-job {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 52px;
	padding: 12px;
	border: 1px solid #E2D6C2;
	border-radius: 14px;
	background: #FCF9F3;
	cursor: pointer;
}

.gpgpl-card-job input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gpgpl-card-job-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	border: 2px solid #7A6A58;
	border-radius: 8px;
	background: #FCF9F3;
	color: transparent;
}

.gpgpl-card-job input:checked + .gpgpl-card-job-box {
	border-color: #4A6A34;
	background: #4A6A34;
	color: #FCF9F3;
}

.gpgpl-card-job input:focus-visible + .gpgpl-card-job-box {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

.gpgpl-card-job input:disabled + .gpgpl-card-job-box {
	opacity: 0.5;
}

.gpgpl-card-job-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.gpgpl-card-job-text b {
	font-size: 0.92rem;
	line-height: 1.3;
}

.gpgpl-card-job-text small {
	font-size: 0.78rem;
	color: #5F5040;
}

.gpgpl-card-job.is-done .gpgpl-card-job-text b {
	color: #5F5040;
	text-decoration: line-through;
}

.gpgpl-app .gpgpl-card-next {
	margin: 0;
	padding: 10px 12px 10px 28px;
	border-radius: 14px;
	background: #F2EADC;
	font-size: 0.88rem;
	line-height: 1.45;
}

.gpgpl-app .gpgpl-card-link {
	align-self: center;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: none;
	background: transparent;
	color: #38522A;
	font: 700 0.9rem/1 var(--gpgpl-font-ui);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.gpgpl-card-plant-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 8px;
}

.gpgpl-card-plant-facts > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 14px;
	background: #F5EDDF;
}

.gpgpl-card-plant-facts small {
	font-size: 0.74rem;
	color: #6A4C1B;
}

.gpgpl-card-plant-facts b {
	font-size: 0.92rem;
	line-height: 1.25;
}

.gpgpl-app .gpgpl-card-steps {
	margin: 0;
	padding-left: 1.3rem;
	font-size: 0.9rem;
	line-height: 1.5;
}

.gpgpl-app .gpgpl-card-steps li + li {
	margin-top: 3px;
}

.gpgpl-app .gpgpl-card-primary {
	min-height: 48px;
	margin: 0;
	padding: 0 16px;
	border: none;
	border-radius: 14px;
	background: #4A6A34;
	color: #FCF9F3;
	font: 700 0.95rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}

.gpgpl-app .gpgpl-card-primary:hover {
	background: #38522A;
}

.gpgpl-app .gpgpl-card-done-note {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.88rem;
	font-weight: 700;
	color: #38522A;
}

/* Right spot? page */
.gpgpl-card-v2 .gpgpl-pp-cardbox .gpgpl-pp-cardbtn {
	display: none; /* Good partners is its own tool */
}

.gpgpl-app .gpgpl-card-more-head {
	margin: 4px 0 0;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5F5040;
}

/* Move & edit page: labelled tiles */
.gpgpl-card-v2 > .gpgpl-selected-actions {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	overflow: visible;
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-selected-actions > .gpgpl-icon-btn,
.gpgpl-app .gpgpl-card-v2 .gpgpl-selected-actions > .gpgpl-color-swatch-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	height: auto;
	min-height: 68px;
	padding: 8px 4px;
	border: 1px solid #E2D6C2;
	border-radius: 16px;
	background: #FCF9F3;
	color: #3D4A57;
	font: 700 0.8rem/1.2 var(--gpgpl-font-ui);
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-selected-actions > .gpgpl-icon-btn svg {
	width: 22px;
	height: 22px;
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-selected-actions > .gpgpl-icon-btn-danger {
	border-color: #F1C9B8;
	background: #FFF6F2;
	color: #A8361A;
}

.gpgpl-app .gpgpl-card-v2 .gpgpl-selected-actions > .gpgpl-icon-btn[disabled] {
	opacity: 0.45;
}

.gpgpl-card-v2 .gpgpl-selected-actions .gpgpl-color-swatch-visual {
	position: static;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.gpgpl-card-v2 .gpgpl-selected-actions .gpgpl-selected-color {
	z-index: 1;
	cursor: pointer;
}

.gpgpl-card-v2 .gpgpl-card-act-label,
.gpgpl-card-v2 .gpgpl-lock-plant-btn > span {
	font-size: 0.8rem;
	font-weight: 700;
	color: inherit;
}

.gpgpl-app .gpgpl-card-edit-tip {
	margin: 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: #5F5040;
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-app .gpgpl-card-tool,
	.gpgpl-app .gpgpl-design-area .gpgpl-key-sheet {
		transition: none;
		animation: none;
	}
}

/* =====================================================================
   1.92.0: Push/pull — a ↕ handle on top of the selected terrace, slope
   or raised bed, tilt handles on its edges (3D), a pill while dragging,
   and the measurement box. (garden-planner-pushpull.js)
   ===================================================================== */

.gpgpl-pull-handle {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 24;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	cursor: ns-resize;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	will-change: transform;
	animation: gpgpl-action-in 0.16s ease;
	transition: background var(--gpgpl-dur) ease, color var(--gpgpl-dur) ease, box-shadow var(--gpgpl-dur) ease;
}
.gpgpl-pull-handle[hidden] { display: none; }

/* A bigger target than it looks, for thumbs */
.gpgpl-pull-handle::before {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
}

.gpgpl-pull-handle.is-centre {
	z-index: 25;
	width: 46px;
	height: 46px;
	border: 2px solid var(--gpgpl-gold);
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	box-shadow: 0 6px 16px rgba(51, 41, 31, 0.28);
}

.gpgpl-pull-handle.is-edge {
	width: 30px;
	height: 30px;
	border: 2px solid #FCF9F3;
	background: var(--gpgpl-gold);
	color: var(--gpgpl-leaf-dark);
	box-shadow: 0 3px 10px rgba(51, 41, 31, 0.3);
}

.gpgpl-pull-handle.is-corner {
	width: 26px;
	height: 26px;
	border: 3px solid var(--gpgpl-gold);
	background: #FCF9F3;
	color: var(--gpgpl-leaf-dark);
	box-shadow: 0 3px 10px rgba(51, 41, 31, 0.3);
}

/* Each corner's height on the plan, for a slope shaped by its corners */
.gpgpl-corner-height {
	font-size: 10px;
	opacity: 0.9;
}

.gpgpl-pull-handle:hover,
.gpgpl-pull-handle.is-target {
	box-shadow: 0 0 0 3px rgba(224, 176, 74, 0.45), 0 6px 16px rgba(51, 41, 31, 0.28);
}

.gpgpl-pull-handle.is-dragging {
	background: var(--gpgpl-leaf-dark);
	border-color: var(--gpgpl-gold);
	color: #FCF9F3;
	box-shadow: 0 10px 24px rgba(51, 41, 31, 0.34);
}

.gpgpl-pull-handle:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 2px;
}

/* While pushing or pulling, the move, rotate and scale handles step back */
.gpgpl-design-area.is-pushpulling .gpgpl-move-handle {
	opacity: 0.25;
	pointer-events: none;
}
.gpgpl-design-area.is-pushpulling .gpgpl-pull-handle.is-edge:not(.is-dragging),
.gpgpl-design-area.is-pushpulling .gpgpl-pull-handle.is-corner:not(.is-dragging),
.gpgpl-design-area.is-pushpulling .gpgpl-pull-handle.is-centre:not(.is-dragging) {
	opacity: 0.35;
}

.gpgpl-pull-readout {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 26;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	max-width: min(78vw, 300px);
	padding: 0.35rem 0.75rem;
	border-radius: 14px;
	background: var(--gpgpl-leaf-dark);
	color: #FCF9F3;
	font: 500 0.75rem/1.25 var(--gpgpl-font-ui);
	text-align: center;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(51, 41, 31, 0.25);
}
.gpgpl-pull-readout strong {
	font-size: 1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.gpgpl-pull-readout.is-snapped strong { color: var(--gpgpl-gold); }
.gpgpl-pull-readout.is-warn { background: var(--gpgpl-clay-dark); }
.gpgpl-pull-readout[hidden] { display: none; }

/* The measurement box */
.gpgpl-pull-box {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 25;
	width: max-content;
	max-width: min(calc(100% - 20px), 340px);
	padding: 6px;
	border: 1px solid var(--gpgpl-border);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 6px 18px rgba(51, 41, 31, 0.18);
	font-family: var(--gpgpl-font-ui);
	color: var(--gpgpl-ink);
	animation: gpgpl-action-in 0.16s ease;
}
.gpgpl-pull-box[hidden] { display: none; }

.gpgpl-pull-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.gpgpl-pull-field {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 0 10px;
	border: 2px solid var(--gpgpl-border);
	border-radius: 12px;
	background: #FCF9F3;
	cursor: text;
}
.gpgpl-pull-field:focus-within {
	border-color: var(--gpgpl-gold);
}

.gpgpl-pull-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--gpgpl-ink-soft);
	white-space: nowrap;
}

.gpgpl-design-area .gpgpl-pull-input {
	width: 4.6em;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: 700 1.05rem/1.2 var(--gpgpl-font-ui);
	font-variant-numeric: tabular-nums;
	color: var(--gpgpl-ink);
	text-align: right;
	outline: none;
}

.gpgpl-pull-unit {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gpgpl-ink-soft);
}

.gpgpl-pull-step {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: var(--gpgpl-paper);
	color: var(--gpgpl-leaf-dark);
	font: 700 1.3rem/1 var(--gpgpl-font-ui);
	cursor: pointer;
}
.gpgpl-pull-step:hover { background: var(--gpgpl-border); }
.gpgpl-pull-step:focus-visible {
	outline: 2px solid var(--gpgpl-gold);
	outline-offset: 1px;
}

.gpgpl-pull-note {
	/* Wraps to the width of the row above, rather than widening the box */
	width: 0;
	min-width: 100%;
	box-sizing: border-box;
	padding: 4px 4px 0;
	font-size: 0.74rem;
	line-height: 1.3;
	color: var(--gpgpl-ink-soft);
}
.gpgpl-pull-note:empty { display: none; }
.gpgpl-pull-box.is-warn .gpgpl-pull-note { color: var(--gpgpl-clay-dark); font-weight: 600; }

/* Out of the way with the rest of the controls in full screen */
.gpgpl-design-area.is-fullscreen.controls-hidden .gpgpl-pull {
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.gpgpl-pull-handle, .gpgpl-pull-box { animation: none; }
}

/* ==========================================================================
   The kitchen garden, made automatic (1.95.0, garden-planner-veg.js)
   ========================================================================== */

/* The plant card: common name, botanical name under it */
.gpgpl-card-latin {
	flex-basis: 100%;
	margin-top: -0.25rem;
	font-size: 0.78rem;
	font-style: italic;
	color: var(--gpgpl-ink-soft);
	overflow-wrap: anywhere;
}
.gpgpl-card-latin[hidden] { display: none; }

/* Crop group and harvest tiles */
.gpgpl-app button.gpgpl-card-fact,
button.gpgpl-card-fact {
	border: 0;
	font: inherit;
	color: inherit;
	cursor: pointer;
	position: relative;
}
.gpgpl-card-fact.is-crop { background: #F2EADC; }
.gpgpl-card-fact.is-crop::after {
	content: "?";
	position: absolute;
	top: 4px;
	right: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #E2E8D3;
	color: #38522A;
	font: 700 0.6rem/14px var(--gpgpl-font-ui, inherit);
	text-align: center;
}
.gpgpl-card-fact-dot {
	display: block;
	width: 10px;
	height: 10px;
	margin-bottom: 3px;
	border-radius: 50%;
}

/* Bed tags on the plan: a veg bed's number in its group's colour, with its
   name and group when there's room */
.gpgpl-bed-tag.is-veg {
	padding: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	container-type: inline-size;
}
.gpgpl-bed-tag-in {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: 100%;
	padding: 2px 8px 2px 2px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 3px rgba(51, 41, 31, 0.18);
}
.gpgpl-bed-tag-in i {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--fam, #7A6A58);
	color: #FCF9F3;
	font: 700 0.66rem/18px var(--gpgpl-font-ui, inherit);
	font-style: normal;
	text-align: center;
}
.gpgpl-bed-tag-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.66rem;
}
@container (max-width: 54px) {
	.gpgpl-bed-tag-text { display: none; }
	.gpgpl-bed-tag-in { padding: 2px; }
}

/* The Food tab's rotation buttons */
.gpgpl-rot-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.gpgpl-rot-btns .gpgpl-score-gain.is-quiet {
	background: transparent;
	box-shadow: inset 0 0 0 1.5px #DAE2C9;
	color: var(--gpgpl-ink);
}
.gpgpl-rot-why {
	padding: 0;
	border: 0;
	background: none;
	color: #38522A;
	font-family: var(--gpgpl-font-ui, inherit);
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* A crop group chip */
.gpgpl-veg-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--fam, #7A6A58) 16%, #FCF9F3);
	color: var(--gpgpl-ink);
	font: 700 0.78rem/1.3 var(--gpgpl-font-ui, inherit);
	white-space: nowrap;
}
.gpgpl-veg-group::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--fam, #7A6A58);
}
.gpgpl-veg-group.is-small { padding: 2px 8px 2px 6px; font-size: 0.72rem; }

/* Build a veg bed */
.gpgpl-veg-placeico {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #F3E7D8;
	color: #7A4E25;
}
.gpgpl-veg-placeico.is-rot { background: #DCE8F4; color: #1D5068; }
.gpgpl-veg-easy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}
.gpgpl-veg-easy .gpgpl-pp-pill { background: #FFF6E6; border-color: #F2D7A6; }
.gpgpl-veg-fam { display: flex; flex-direction: column; gap: 6px; }
.gpgpl-veg-crops { display: flex; flex-wrap: wrap; gap: 6px; }
.gpgpl-veg-crop {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-height: 40px;
	padding: 0 14px;
	border: 1.5px solid #E2E8D3;
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 600 0.85rem var(--gpgpl-font-ui, inherit);
	cursor: pointer;
}
.gpgpl-veg-crop.is-on { border-color: #4A6A34; background: #EAE9D8; }
.gpgpl-veg-crop svg { color: #4A6A34; }

/* The result: each bed and what goes in it */
.gpgpl-veg-bedcard {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px 14px;
	border: 1.5px solid #E2E8D3;
	border-radius: 16px;
	background: #FCF9F3;
}
.gpgpl-veg-bedhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.gpgpl-veg-bedhead strong { font: 700 0.98rem var(--gpgpl-font-display, inherit); }
.gpgpl-veg-bedhead strong small {
	margin-left: 4px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #FFF1D6;
	color: #5A3B00;
	font: 700 0.66rem var(--gpgpl-font-ui, inherit);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 2px;
}
.gpgpl-veg-row { display: flex; align-items: flex-start; gap: 10px; }
.gpgpl-veg-row.is-helper { padding: 8px 10px; border-radius: 12px; background: #FFF9EE; }
.gpgpl-veg-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; }
.gpgpl-veg-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gpgpl-veg-row-text strong { font: 600 0.92rem var(--gpgpl-font-ui, inherit); }
.gpgpl-veg-row-text strong span { color: #5F5040; font-weight: 700; }
.gpgpl-veg-row-text small { font-size: 0.78rem; line-height: 1.35; color: #5F5040; }
.gpgpl-veg-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; }
.gpgpl-veg-tags > span { display: inline-flex; align-items: center; gap: 4px; font: 600 0.72rem var(--gpgpl-font-ui, inherit); color: #38522A; }
.gpgpl-veg-tags svg { width: 13px; height: 13px; color: #B7791F; flex: none; }

/* The rotation, step by step */
.gpgpl-veg-cycle {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 12px;
	border-radius: 16px;
	background: #F2EADC;
}
.gpgpl-veg-step { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gpgpl-veg-step b { font: 700 0.66rem var(--gpgpl-font-ui, inherit); text-transform: uppercase; letter-spacing: 0.05em; color: #5F5040; }
.gpgpl-veg-arrow { display: inline-flex; color: #7A6A58; margin-top: 12px; }
.gpgpl-veg-back {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-basis: 100%;
	font: 600 0.74rem var(--gpgpl-font-ui, inherit);
	color: #5F5040;
}
.gpgpl-veg-back svg { width: 14px; height: 14px; }
.gpgpl-veg-cycle.is-small { padding: 10px; }

/* Rotation beds */
.gpgpl-veg-userow { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px solid #F2EADC; }
.gpgpl-veg-userow strong { font: 700 0.9rem var(--gpgpl-font-ui, inherit); }
.gpgpl-veg-userow .gpgpl-pp-pill { min-height: 36px; padding: 0 12px; font-size: 0.78rem; }
.gpgpl-veg-userow .gpgpl-pp-pills { flex-wrap: wrap; overflow: visible; }
.gpgpl-veg-years { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.gpgpl-veg-years th, .gpgpl-veg-years td { padding: 5px 4px; text-align: left; vertical-align: middle; }
.gpgpl-veg-years thead th { font: 700 0.72rem var(--gpgpl-font-ui, inherit); color: #5F5040; }
.gpgpl-veg-years tbody th { font: 700 0.82rem var(--gpgpl-font-ui, inherit); white-space: nowrap; }
.gpgpl-veg-years .gpgpl-veg-group { white-space: normal; }

/* Companions */
.gpgpl-veg-h3 { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.gpgpl-veg-h3 svg { color: #B7791F; }
.gpgpl-veg-apart {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #FFF1EC;
}
.gpgpl-veg-apart strong { font: 700 0.88rem var(--gpgpl-font-ui, inherit); color: #8A2F14; }
.gpgpl-veg-apart span { font-size: 0.8rem; line-height: 1.4; color: #5B3B30; }
.gpgpl-veg-apart.is-note { gap: 6px; margin: 8px 0 4px; background: #FFF6E6; }
.gpgpl-veg-apart.is-note strong { color: #6B4200; }
.gpgpl-veg-apart.is-note .gpgpl-pp-fix { align-self: flex-start; }
.gpgpl-veg-apart.is-note .gpgpl-rot-btns { margin-top: 2px; }

/* A bed's card */
.gpgpl-veg-bedrow { display: flex; flex-direction: column; gap: 8px; }
.gpgpl-veg-bedline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 48px;
	padding: 6px 12px;
	border: 1.5px solid #E2E8D3;
	border-radius: 12px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.gpgpl-veg-bedline > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gpgpl-veg-bedline small { font-size: 0.72rem; color: #5F5040; }
.gpgpl-veg-bedline strong { font-size: 0.88rem; }
.gpgpl-pp-bedbtns.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gpgpl-pp-bedbtns.is-3 .gpgpl-pp-bedbtn { flex-direction: column; gap: 3px; min-height: 56px; padding: 6px 4px; font-size: 0.76rem; text-align: center; }
.gpgpl-pp-bedbtns[hidden] { display: none; }
.gpgpl-pp-bedbtn.is-wide { width: 100%; background: #FFF4E2; color: #5A3B00; }

/* ==========================================================================
   Jobs, plant by plant, and Harvest this month (1.96.0)
   ========================================================================== */

.gpgpl-jobs-list.is-grouped { gap: 0.75rem; }

.gpgpl-jobgrp {
	overflow: hidden;
	border-radius: 20px;
	background: #FCF9F3;
	box-shadow: 0 1px 2px rgba(51, 41, 31, 0.06), 0 4px 14px rgba(51, 41, 31, 0.05);
	transition: opacity 0.25s;
}
.gpgpl-jobgrp.is-done { opacity: 0.72; }

.gpgpl-jobgrp-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.85rem 0.6rem;
	background: linear-gradient(180deg, #F2EADC, #FCF9F3);
}
.gpgpl-jobgrp-names { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.gpgpl-jobgrp-name {
	font: 700 1.02rem/1.2 var(--gpgpl-font-display, inherit);
	color: var(--gpgpl-ink);
}
.gpgpl-jobgrp-latin {
	font-size: 0.8rem;
	color: var(--gpgpl-ink-soft);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.gpgpl-jobgrp-fam {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	align-self: flex-start;
	margin-top: 3px;
	font: 600 0.7rem var(--gpgpl-font-ui, inherit);
	color: #5F5040;
}
.gpgpl-jobgrp-fam::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--fam, #7A6A58);
}
.gpgpl-jobgrp-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	min-width: 38px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: #F2EADC;
	color: #38522A;
	font: 700 0.78rem var(--gpgpl-font-ui, inherit);
}
.gpgpl-jobgrp-count.is-done { background: var(--gpgpl-leaf); color: #FCF9F3; }

/* A plant's photo, or its first letter on its colour */
.gpgpl-jobpic {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	overflow: hidden;
	border-radius: 16px;
	color: #FCF9F3;
	font: 700 1.2rem var(--gpgpl-font-display, inherit);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.gpgpl-jobpic img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Its jobs */
.gpgpl-jobgrp-jobs { display: flex; flex-direction: column; }
.gpgpl-job.is-in-group {
	border-radius: 0;
	padding: 0.75rem 0.85rem;
	border-top: 1px solid #F2EADC;
	background: transparent;
}
.gpgpl-job.is-in-group .gpgpl-job-box { margin-top: 2px; }
.gpgpl-job.is-in-group .gpgpl-job-title { font-size: 0.95rem; line-height: 1.35; }
.gpgpl-job.is-in-group .gpgpl-job-how { line-height: 1.45; }
.gpgpl-job-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; }
.gpgpl-job-tags:empty { display: none; }
.gpgpl-job.is-in-group .gpgpl-job-flag { padding: 2px 8px; }
.gpgpl-job-kind {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px 2px 6px;
	border-radius: 999px;
	background: #F2EADC;
	color: #38522A;
	font: 700 0.68rem var(--gpgpl-font-ui, inherit);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.gpgpl-job-kind.is-sow { background: #E2E8D3; color: #38522A; }
.gpgpl-job-kind.is-plant { background: #F3E7D8; color: #7A4E25; }
.gpgpl-job-kind.is-harvest { background: #FBE7D0; color: #9A4F12; }
.gpgpl-job-kind.is-prune { background: #EDE6F6; color: #5B3F8A; }
.gpgpl-job-kind.is-water { background: #DDEBF6; color: #24577E; }
.gpgpl-job-kind.is-feed { background: #FFF1CF; color: #7A5600; }
.gpgpl-job-kind.is-protect { background: #E1ECF4; color: #2A4F6E; }
.gpgpl-job-kind.is-mulch { background: #EFE6DA; color: #6B4F2F; }
.gpgpl-job-kind.is-check { background: #F6E1E4; color: #8A2633; }
.gpgpl-job.is-done .gpgpl-job-kind,
.gpgpl-job.is-done .gpgpl-job-flag { opacity: 0.55; }
.gpgpl-job.is-in-group .gpgpl-job-when.is-crop::before { content: "🌱 "; }
.gpgpl-jobgrp-credit {
	margin: 0;
	padding: 0 0.85rem 0.6rem;
	font-size: 0.66rem;
	color: var(--gpgpl-ink-soft);
}

/* Harvest this month */
.gpgpl-harvest {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	margin: 0.25rem 0 0.75rem;
	padding: 0.85rem;
	border-radius: 20px;
	background: linear-gradient(160deg, #FFF4E2, #FBE9D3);
}
.gpgpl-harvest-h { display: flex; align-items: center; gap: 0.65rem; }
.gpgpl-harvest-h b { display: block; font: 700 1.02rem var(--gpgpl-font-display, inherit); color: #5A3500; }
.gpgpl-harvest-h small { font-size: 0.8rem; color: #8A5A2B; }
.gpgpl-harvest-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #FCF9F3;
	color: #B85C12;
}
.gpgpl-harvest-row {
	display: flex;
	gap: 0.6rem;
	margin: 0 -0.85rem;
	padding: 2px 0.85rem 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}
.gpgpl-harvest-row::-webkit-scrollbar { display: none; }
.gpgpl-harvest-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	flex: none;
	width: 96px;
	padding: 10px 6px 9px;
	border-radius: 16px;
	background: #FCF9F3;
	text-align: center;
	scroll-snap-align: start;
	box-shadow: 0 1px 3px rgba(90, 53, 0, 0.08);
}
.gpgpl-harvest-tile .gpgpl-jobpic { border-radius: 50%; }
.gpgpl-harvest-tile b {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.82rem;
}
.gpgpl-harvest-state {
	padding: 2px 7px;
	border-radius: 999px;
	font: 700 0.62rem var(--gpgpl-font-ui, inherit);
	white-space: nowrap;
}
.gpgpl-harvest-state.is-now { background: #E2E8D3; color: #38522A; }
.gpgpl-harvest-state.is-first { background: #DDEBF6; color: #24577E; }
.gpgpl-harvest-state.is-last { background: #FCE2DB; color: #9A2F14; }
.gpgpl-harvest-soon { margin: 0; font-size: 0.8rem; line-height: 1.4; color: #6B4420; }
.gpgpl-job.is-in-group .gpgpl-job-when:not(.is-crop)::before { content: "❄️ "; }
.gpgpl-jobgrp.is-locked .gpgpl-jobpic { filter: blur(7px); }
.gpgpl-jobgrp.is-locked .gpgpl-jobpic span,
.gpgpl-jobgrp.is-locked .gpgpl-jobgrp-credit { visibility: hidden; }

/* ==========================================================================
   The Jobs list, part two (1.97.0): season tip, filters, parts, due dates,
   short how-to, swipe to tick, leaf bursts, photo taps, harvest log
   ========================================================================== */

/* The month's tip */
.gpgpl-jobs-season {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 0.85rem;
	padding: 0.7rem 0.85rem;
	border-radius: 16px;
}
.gpgpl-jobs-season > span:last-child { display: flex; flex-direction: column; gap: 1px; font-size: 0.85rem; line-height: 1.4; }
.gpgpl-jobs-season b { font: 700 0.72rem var(--gpgpl-font-ui, inherit); text-transform: uppercase; letter-spacing: 0.05em; }
.gpgpl-jobs-season > span:last-child > span { color: var(--gpgpl-ink); }
.gpgpl-jobs-season-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.65);
}

/* Filters */
.gpgpl-jobs-filters {
	display: flex;
	gap: 8px;
	margin: 0 0 0.75rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.gpgpl-jobs-filters::-webkit-scrollbar { display: none; }
.gpgpl-jobs-filter {
	flex: none;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid #E2E8D3;
	border-radius: 999px;
	background: #FCF9F3;
	color: var(--gpgpl-ink);
	font: 600 0.85rem var(--gpgpl-font-ui, inherit);
	cursor: pointer;
}
.gpgpl-jobs-filter.is-on { background: var(--gpgpl-leaf-dark, #33291F); border-color: var(--gpgpl-leaf-dark, #33291F); color: #FCF9F3; }

/* Parts of the list */
.gpgpl-jobs-part {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0.6rem 0.2rem 0;
	font: 700 0.95rem var(--gpgpl-font-display, inherit);
	color: var(--gpgpl-ink);
}
.gpgpl-jobs-part:first-child { margin-top: 0; }
.gpgpl-jobs-part small { font: 400 0.78rem var(--gpgpl-font-ui, inherit); color: var(--gpgpl-ink-soft); }
.gpgpl-jobs-part.is-done { color: var(--gpgpl-ink-soft); }
.gpgpl-jobs-hint { margin: 0.6rem 0.2rem 0; font-size: 0.76rem; line-height: 1.4; color: var(--gpgpl-ink-soft); text-align: center; }

/* When a dated job starts */
.gpgpl-job-due {
	padding: 2px 8px;
	border-radius: 999px;
	background: #F2EADC;
	color: #5F5040;
	font: 700 0.66rem var(--gpgpl-font-ui, inherit);
}
.gpgpl-job-due.is-week { background: #4A6A34; color: #FCF9F3; }

/* Short how-to, then "How to do it" */
.gpgpl-job-how.is-short {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.gpgpl-job-more {
	align-self: flex-start;
	min-height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #38522A;
	font: 700 0.8rem var(--gpgpl-font-ui, inherit);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
.gpgpl-job.is-done .gpgpl-job-more { display: none; }

/* Swipe to tick */
.gpgpl-jobgrp-jobs { position: relative; }
.gpgpl-job.is-in-group {
	touch-action: pan-y;
	transition: transform 0.2s var(--gpgpl-ease, ease);
	background: #FCF9F3;
}
.gpgpl-job.is-in-group.is-swiping { transition: none; }
.gpgpl-job-swipe {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 120px;
	padding-right: 18px;
	background: #E0E7D1;
	color: #4A6A34;
	transition: background 0.15s, color 0.15s;
}
.gpgpl-job.is-swiped .gpgpl-job-swipe { background: var(--gpgpl-leaf, #4A6A34); color: #FCF9F3; }
.gpgpl-jobgrp { position: relative; }
.gpgpl-jobgrp-jobs { overflow: hidden; }

/* Tap a photo to find the plant */
.gpgpl-jobgrp-pic {
	position: relative;
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 16px;
	cursor: pointer;
}
.gpgpl-jobgrp-pic::after {
	content: "";
	position: absolute;
	right: -3px;
	bottom: -3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #FCF9F3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.3-6-10a6 6 0 0 1 12 0c0 4.7-6 10-6 10z'/%3E%3Ccircle cx='12' cy='11' r='2'/%3E%3C/svg%3E") center / 13px no-repeat;
	box-shadow: 0 1px 3px rgba(51, 41, 31, 0.25);
}
.gpgpl-jobgrp.is-locked .gpgpl-jobgrp-pic::after { display: none; }

/* Leaf bursts */
.gpgpl-burst {
	position: fixed;
	z-index: 2147483601;
	width: 0;
	height: 0;
	pointer-events: none;
}
.gpgpl-burst i {
	position: absolute;
	left: -4px;
	top: -6px;
	width: 8px;
	height: 12px;
	border-radius: 8px 0 8px 0;
	opacity: 0;
	animation: gpgpl-burst 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.gpgpl-burst.is-big i { width: 11px; height: 16px; left: -5px; top: -8px; animation-duration: 1s; }
@keyframes gpgpl-burst {
	0% { opacity: 1; transform: rotate(var(--a)) translateY(-10px) scale(0.7); }
	75% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(140deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.gpgpl-burst { display: none; }
	.gpgpl-job.is-in-group { transition: none; }
}

/* The harvest log */
.gpgpl-harvest-tile { width: 120px; }
.gpgpl-harvest-pick {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	margin-top: 3px;
	padding: 0 8px;
	border: 1.5px solid #F0CFA4;
	border-radius: 999px;
	background: #FCF9F3;
	color: #8A4B10;
	font: 700 0.72rem var(--gpgpl-font-ui, inherit);
	white-space: nowrap;
	cursor: pointer;
}
.gpgpl-harvest-pick.is-on { border-color: #4A6A34; background: #4A6A34; color: #FCF9F3; }
.gpgpl-harvest-count { font-size: 0.66rem; color: #8A5A2B; }
.gpgpl-harvest-tally {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 8px 10px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.7);
	font-size: 0.8rem;
	color: #6B4420;
}
.gpgpl-harvest-tally svg { flex: none; color: #B85C12; }

/* ======================================================================
   Hand-drawn plant symbols on the plan (2.6.0, garden-planner-sketch.js)
   ====================================================================== */

.gpgpl-plant-token.is-sketch {
	border-color: transparent;
	box-shadow: none;
	background-color: transparent;
	filter: drop-shadow(0 1px 1.5px rgba(51, 41, 31, 0.28));
}


.gpgpl-plant-token.is-sketch .gpgpl-token-label {
	color: #2E2A22;
	text-shadow: 0 0 3px #FCF9F3, 0 0 6px #FCF9F3, 0 0 8px #FCF9F3;
}

/* ---- 2.6.2: plant labels on or off, on the plan (garden-planner-view.js) ---- */
.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-labels-btn {
	order: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	border-radius: 16px;
	background: var(--gpgpl-glass);
	box-shadow: var(--gpgpl-float-shadow);
	color: var(--gpgpl-ink);
	cursor: pointer;
	pointer-events: auto;
}

.gpgpl-labels-btn .gpgpl-labels-slash { display: none; }
.gpgpl-labels-btn[aria-pressed="false"] .gpgpl-labels-slash { display: inline; }
.gpgpl-labels-btn[aria-pressed="false"] { opacity: 0.8; }
.gpgpl-design-area.is-view-3d .gpgpl-labels-btn { display: none !important; }

.gpgpl-design-area.is-labels-off .gpgpl-token-label,
.gpgpl-design-area.is-labels-off .gpgpl-token-num { display: none !important; }

@media (max-width: 380px) {
	.gpgpl-app .gpgpl-design-area .gpgpl-top-actions .gpgpl-labels-btn { width: 44px; }
}

/* ---- 2.6.4: crowding shown only round the plant being worked on ----
   Selected: a white-and-green double ring. Too close to it: a gold ring.
   The selected plant, if crowded itself: a dashed gold ring outside its own. */
.gpgpl-plant-token.is-crowded,
.gpgpl-plant-token.is-sketch.is-crowded {
	border-color: rgba(51, 41, 31, 0.25);
	box-shadow: 0 1px 4px rgba(51, 41, 31, 0.2);
}

.gpgpl-plant-token.is-sketch.is-crowded {
	border-color: transparent;
	box-shadow: none;
}

.gpgpl-plant-token.is-selected,
.gpgpl-plant-token.is-sketch.is-selected,
.gpgpl-plant-token.is-crowded.is-selected {
	border-color: #fff;
	box-shadow: 0 0 0 3px #2F5D3A, 0 4px 14px rgba(29, 43, 26, 0.35);
}

.gpgpl-plant-token.is-crowd-shown,
.gpgpl-plant-token.is-sketch.is-crowd-shown {
	border-color: var(--gpgpl-gold);
	box-shadow: 0 0 0 3px rgba(198, 154, 59, 0.45);
}

.gpgpl-plant-token.is-crowd-self {
	outline: 2.5px dashed var(--gpgpl-gold);
	outline-offset: 5px;
}