/* CaféTico garden tools: styles for the workspace mounted at #app.gp, plus the compact tool header (rewritten Oct 12 2026).
   Cream canvas, white cards, restrained outlines, one rounded control style. Scoped to .gp / .gp-hero and built on the site tokens in site.css; edit here, not in planner.js. */
.gp { color: var(--fg-1); --gp-line: var(--border-1); --gp-card: var(--white); --gp-r: 14px; --gp-ctl-r: 12px; }
.gp h2 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); margin: 0 0 var(--space-4); }
.gp h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin: 0 0 var(--space-3); }
.gp h4 { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1.3; margin: 0 0 var(--space-2); }
.gp h5 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-bold); margin: var(--space-3) 0 var(--space-1); color: var(--fg-1); }
.gp p { color: var(--fg-2); margin: 0 0 var(--space-3); max-width: 46em; }
.gp p + p { margin-top: 0; }
.gp a:not(.button) { color: var(--fern-700); font-weight: var(--fw-semibold); text-underline-offset: 3px; }
.gp a:not(.button):hover { color: var(--roast-600); }
.gp [hidden] { display: none !important; }
.gp .note { font-size: var(--fs-sm); color: var(--fg-3); }
.gp .kicker { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-brand); margin: 0 0 var(--space-1); }
.gp .lbl { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--fg-1); }
.gp .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gp .print-only { display: none; }
.gp :focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(255, 199, 0, .6); }

/* ---- compact tool header ---- */
.gp-hero { padding: clamp(14px, 2.4vw, 26px) 0 clamp(18px, 2.8vw, 30px); color: var(--lime-100); }
.gp-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-5); align-items: center; }
.gp-hero .crumbs { margin-bottom: var(--space-3); }
.gp-hero .mega--tool { font-size: clamp(30px, 4vw, 46px); margin: 0 0 var(--space-2); }
.gp-hero__lead { margin: 0; max-width: 40em; color: var(--cream-100); font-size: var(--fs-lg); line-height: 1.45; }
.gp-hero__photo { margin: 0; width: 132px; height: 132px; border-radius: 50%; overflow: hidden; border: 3px solid var(--cream-100); background: var(--forest-800); flex: none; }
.gp-hero__photo picture, .gp-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .gp-hero__photo { width: 64px; height: 64px; border-width: 2px; } .gp-hero__grid { gap: var(--space-3); } .gp-hero__lead { font-size: var(--fs-body); } }
.gp-section { padding-block: clamp(var(--space-5), 3.5vw, var(--space-7)); }
.gp-app-section { padding-bottom: clamp(var(--space-6), 5vw, var(--space-8)); }

/* ---- buttons, chips and controls ---- */
.gp .gp-btn, .gp .button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 8px var(--space-4); font: inherit; font-size: var(--fs-btn-sm); font-weight: var(--fw-semibold); line-height: 1.2; text-align: center; text-decoration: none; color: var(--charcoal); background: var(--white); border: var(--border-w-ui) solid var(--charcoal); border-radius: var(--radius-pill); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast); }
.gp .gp-btn:hover, .gp .button:hover { background: var(--hover-tint); }
.gp .gp-btn--primary, .gp .button.primary { background: var(--tico-yellow); box-shadow: var(--shadow-btn); }
.gp .gp-btn--primary:hover, .gp .button.primary:hover { background: var(--tico-yellow); transform: translate(var(--lift), var(--lift)); box-shadow: var(--shadow-btn-hover); }
.gp .gp-btn--ghost { border-color: transparent; background: transparent; color: var(--fern-700); padding-inline: var(--space-3); }
.gp .gp-btn--ghost:hover { background: var(--hover-tint); }
.gp .gp-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.gp .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.gp .actions--center { justify-content: center; }
.gp .field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.gp label { font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--fg-1); }
.gp input:not([type=checkbox]):not([type=radio]):not([type=file]), .gp select, .gp textarea { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--fg-1); background: var(--white); border: var(--border-w-ui) solid var(--border-2); border-radius: var(--gp-ctl-r); }
.gp select { padding-right: 34px; }
.gp textarea { padding: var(--space-3) 14px; min-height: 96px; resize: vertical; line-height: var(--lh-body); }
.gp input:focus, .gp select:focus, .gp textarea:focus { outline: none; border-color: var(--charcoal); box-shadow: var(--focus-halo); }
.gp input[type=file] { width: 100%; font-size: 15px; }
.gp fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gp legend { font-size: var(--fs-label); font-weight: var(--fw-semibold); padding: 0; margin-bottom: 6px; }
.gp .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.gp .fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gp .fields--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.gp .full { grid-column: 1 / -1; }
.gp .check { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: var(--fw-regular); min-height: var(--tap); }
.gp .check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--fern-700); flex: none; }
.gp .seg-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--cream-200); border-radius: var(--radius-pill); max-width: 100%; }
.gp .seg { position: relative; cursor: pointer; font-weight: var(--fw-semibold); }
.gp .seg input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gp .seg span { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-pill); font-size: var(--fs-btn-sm); color: var(--fg-1); white-space: nowrap; }
.gp .seg input:checked + span { background: var(--fern-700); color: var(--cream-100); }
.gp .seg input:focus-visible + span { outline: 3px solid var(--charcoal); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(255, 199, 0, .6); }
.gp .gchip { position: relative; cursor: pointer; display: inline-flex; }
.gp .gchip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.gp .gchip span { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--space-4); border: var(--border-w-ui) solid var(--border-2); border-radius: var(--radius-pill); background: var(--white); font-size: var(--fs-btn-sm); font-weight: var(--fw-semibold); }
.gp .gchip span::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); background: var(--white); }
.gp .gchip input:checked + span { background: var(--lime-100); border-color: var(--fern-700); color: var(--forest-900); }
.gp .gchip input:checked + span::before { border-color: var(--fern-700); background: var(--fern-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.gp .gchip input:focus-visible + span { outline: 3px solid var(--charcoal); outline-offset: 1px; box-shadow: 0 0 0 5px rgba(255, 199, 0, .6); }
.gp .badge { display: inline-block; padding: 2px 10px; margin: 0 var(--space-1) 0 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--lime-100); color: var(--forest-900); border-radius: var(--radius-pill); letter-spacing: 0; text-transform: none; height: auto; }
.gp .btag { display: inline-block; padding: 2px 10px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--lime-100); color: var(--forest-900); border-radius: var(--radius-pill); }
.gp .btag--off { background: var(--cream-200); color: var(--fg-3); }
.gp .count { display: inline-block; min-width: 22px; padding: 0 7px; margin-left: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 20px; text-align: center; background: var(--cream-200); border-radius: var(--radius-pill); }

/* ---- navigation ---- */
.gp-nav { margin-bottom: var(--space-5); }
.gp-nav__row { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; padding: 5px; background: var(--white); border: 1px solid var(--gp-line); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; position: relative; }
.gp .nav-item, .gp .nav-pop__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--space-4); font: inherit; font-size: var(--fs-btn-sm); font-weight: var(--fw-semibold); color: var(--fg-1); text-decoration: none; background: transparent; border: 0; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap; }
.gp .nav-item:hover, .gp .nav-pop__item:hover { background: var(--hover-tint); color: var(--fg-1); }
.gp .nav-item.is-active { background: var(--fern-700); color: var(--cream-100); }
.gp .nav-learn { position: relative; }
.gp .nav-pop { position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; background: var(--white); border: 1px solid var(--gp-line); border-radius: var(--gp-r); box-shadow: 0 12px 28px rgba(28, 40, 24, .18); display: grid; }
.gp .nav-pop__item { border-radius: var(--gp-ctl-r); justify-content: flex-start; width: 100%; }
.gp-nav__pick { display: none; }
.gp-nav__pick label { display: block; margin-bottom: 6px; }
@media (max-width: 820px) { .gp-nav__row { display: none; } .gp-nav__pick { display: block; } }

/* ---- cards and shared layout ---- */
.gp .panel, .gp .tile { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: clamp(18px, 2.4vw, 28px); min-width: 0; margin-bottom: var(--space-5); }
.gp .panel > h2:first-child, .gp .panel > h3:first-child { margin-top: 0; }
.gp .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); }
.gp .tile { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gp .tile p { margin: 0; }
.gp .tile .actions { margin-top: auto; padding-top: var(--space-3); }
.gp .tile .spot { margin-bottom: var(--space-2); }
.gp .alsolinks { margin-top: var(--space-5); }
.gp .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.gp .two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.gp .card { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: var(--space-5); min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.gp .card p { margin: 0; }
.gp .area, .gp .job { border: 1px solid var(--gp-line); background: var(--cream-100); padding: var(--space-4); border-radius: var(--gp-r); margin: var(--space-4) 0; }
.gp .rowhead { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.gp .rowhead h3 { margin: 0; }
.gp .stat { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--gp-line); }
.gp .stat strong { text-align: right; overflow-wrap: anywhere; }
.gp .guidance { background: var(--lime-100); color: var(--forest-900); padding: var(--space-3) var(--space-4); border-radius: var(--gp-ctl-r); font-size: var(--fs-sm); max-width: none; }
.gp .error { background: var(--danger-bg); color: #7a2418; padding: var(--space-3) var(--space-4); border-radius: var(--gp-ctl-r); max-width: none; }
.gp .status { padding: var(--space-3) var(--space-4); background: var(--lime-100); color: var(--forest-900); border-radius: var(--gp-ctl-r); margin: 0 0 var(--space-4); max-width: none; }
.gp .empty { background: var(--cream-200); padding: var(--space-5); border-radius: var(--gp-r); max-width: none; }
.gp .source { font-size: var(--fs-xs); color: var(--fg-3); max-width: none; }
.gp details { border-top: 1px solid var(--gp-line); padding: var(--space-2) 0; }
.gp summary { cursor: pointer; font-weight: var(--fw-semibold); min-height: var(--tap); display: flex; align-items: center; gap: var(--space-2); list-style: none; }
.gp summary::-webkit-details-marker { display: none; }
.gp summary::after { content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--fern-700); border-bottom: 2px solid var(--fern-700); transform: rotate(45deg) translateY(-2px); transition: transform var(--t-fast); }
.gp details[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.gp details.mini--panel { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: 0 clamp(18px, 2.4vw, 28px); margin-bottom: var(--space-3); }
.gp details.mini--panel[open] { padding-bottom: var(--space-4); }
.gp details.mini--s { border-top: 0; padding: 0; } .gp details.mini--s summary { min-height: 36px; font-size: var(--fs-sm); color: var(--fern-700); }
.gp .comparewrap { overflow-x: auto; }
.gp table { border-collapse: collapse; min-width: 680px; width: 100%; font-size: var(--fs-sm); }
.gp th, .gp td { border-bottom: 1px solid var(--gp-line); padding: var(--space-3); text-align: left; vertical-align: top; }
.gp th { background: var(--cream-200); }
.gp .article p { max-width: 62ch; }
.gp .summarytext { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 260px; }
.gp .photos { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.gp .photo { width: 160px; margin: 0; }
.gp .photo img { width: 160px; height: 120px; object-fit: cover; border-radius: var(--gp-ctl-r); }
.gp .photo figcaption { overflow-wrap: anywhere; font-size: var(--fs-xs); color: var(--fg-3); }
.gp .gp-foot { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--gp-line); font-size: var(--fs-sm); color: var(--fg-3); max-width: none; }
.gp-loading { padding: var(--space-6) 0; color: var(--fg-3); }

/* ---- calculator ---- */
.gp .calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: var(--space-5) var(--space-6); align-items: start; }
.gp .calc__main { display: grid; gap: var(--space-5); min-width: 0; }
.gp .calc__result { position: sticky; top: calc(var(--header-h) + var(--space-4)); min-width: 0; }
.gp .calc__notes { grid-column: 1 / -1; display: grid; gap: var(--space-2); }
.gp .calc-units { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.gp .step { background: var(--gp-card); border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: clamp(16px, 2.2vw, 24px); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.gp .step > h3 { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.gp .step__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fern-700); color: var(--cream-100); font-size: var(--fs-sm); font-weight: var(--fw-bold); flex: none; }
.gp .beds { display: grid; gap: var(--space-3); }
.gp .bed { border: 1px solid var(--gp-line); border-radius: var(--gp-r); background: var(--cream-100); min-width: 0; }
.gp .bed--row { display: flex; align-items: center; gap: var(--space-2); padding: 4px 8px 4px 4px; }
.gp .bed__sum { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; text-align: left; font: inherit; color: var(--fg-1); background: transparent; border: 0; border-radius: var(--gp-ctl-r); padding: var(--space-3); cursor: pointer; min-height: var(--tap); }
.gp .bed__sum:hover { background: var(--hover-tint); }
.gp .bed__name { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.gp .bed__meta { grid-column: 1; font-size: var(--fs-sm); color: var(--fg-2); }
.gp .bed__tags { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.gp .bed--open { padding: var(--space-4); background: var(--white); border-color: var(--fern-600); border-width: 2px; display: grid; gap: var(--space-4); }
.gp .bed__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.gp .bed__head h4 { margin: 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.gp .bed__grid { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: var(--space-4); align-items: start; }
.gp .bed__fields { display: grid; gap: var(--space-3); min-width: 0; }
.gp .bed__diagram { background: var(--cream-100); border-radius: var(--gp-r); padding: var(--space-3); display: grid; place-items: center; }
.gp .diagram { width: 100%; height: auto; max-width: 150px; }
.gp .d-shape { fill: var(--lime-100); stroke: var(--fern-700); stroke-width: 2.5; }
.gp .d-dim { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-linecap: round; }
.gp .d-txt { fill: var(--fg-1); font: 700 12px var(--font-body); }
.gp .bedmats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); align-items: start; }
.gp .bedmat { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-3); border: 1px dashed var(--border-2); border-radius: var(--gp-r); }
.gp .bedmat:has(input:checked) { border-style: solid; border-color: var(--fern-600); background: var(--cream-100); }
.gp .mat { border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: var(--space-4); display: grid; gap: var(--space-3); background: var(--cream-100); }
.gp .mat--off { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gp .mat--off > div { display: grid; }
.gp .mat__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.gp .mat details { border-top: 0; padding: 0; }
.gp .rescard { border-top: 1px solid var(--gp-line); padding-top: var(--space-4); }
.gp .rescard:first-child { border-top: 0; padding-top: 0; }
.gp .rescard__h { display: grid; margin-bottom: var(--space-2); }
.gp .rescard__h h4 { margin: 0; font-size: var(--fs-lg); }
.gp .qty { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.gp .big { font-family: var(--font-body); font-weight: var(--fw-bold); font-size: clamp(44px, 6vw, 64px); line-height: 1; letter-spacing: -0.02em; color: var(--fern-700); overflow-wrap: anywhere; }
.gp .qty__u { font-size: var(--fs-h4); font-weight: var(--fw-semibold); color: var(--fg-1); }
.gp .qty__facts { margin: var(--space-2) 0 var(--space-3); color: var(--fg-1); font-size: var(--fs-btn-md); }
.gp .brk { margin: 0 0 var(--space-3); display: grid; gap: 0; }
.gp .brk div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 8px 0; border-top: 1px solid var(--gp-line); font-size: var(--fs-sm); }
.gp .brk dt { color: var(--fg-2); } .gp .brk dd { margin: 0; font-weight: var(--fw-bold); text-align: right; overflow-wrap: anywhere; }
.gp .units-line, .gp .calc-rows { font-size: var(--fs-sm); }
.gp .calc-rows { padding-left: var(--space-5); margin: 0 0 var(--space-3); color: var(--fg-2); }
.gp .calc-bar { display: none; }

/* ---- plant finder ---- */
.gp .finder-top { display: grid; gap: var(--space-4); }
.gp .finder-top form { display: grid; gap: var(--space-4); }
.gp .gchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.gp .gchips__l { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-2); }
.gp .chip-x, .gp .chip-t, .gp .vt, .gp .mstrip__m { font: inherit; font-size: var(--fs-btn-sm); font-weight: var(--fw-semibold); color: var(--fg-1); cursor: pointer; }
.gp .chip-x { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 var(--space-3) 0 var(--space-4); border: 1px solid var(--fern-600); background: var(--lime-100); border-radius: var(--radius-pill); }
.gp .chip-x:hover { background: var(--lime-100); border-color: var(--charcoal); }
.gp .chip-t { min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--border-2); background: var(--white); border-radius: var(--radius-pill); }
.gp .chip-t.is-on, .gp .vt.is-on, .gp .mstrip__m.is-on { background: var(--fern-700); color: var(--cream-100); border-color: var(--fern-700); }
.gp .rhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-3) 0 var(--space-2); }
.gp .rhead h2 { margin: 0; }
.gp .rhead__r { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.gp .vtoggle { display: inline-flex; gap: 2px; padding: 3px; background: var(--cream-200); border-radius: var(--radius-pill); }
.gp .vt { min-height: 44px; padding: 0 var(--space-4); border: 0; background: transparent; border-radius: var(--radius-pill); }
.gp .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.gp .pcard { background: var(--white); border: 1px solid var(--gp-line); border-radius: var(--gp-r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.gp .pcard__photo { margin: 0; aspect-ratio: 4 / 3; background: var(--cream-200); position: relative; overflow: hidden; }
.gp .pcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp .pcard__photo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 10px; font-size: 11px; line-height: 1.3; color: var(--cream-100); background: rgba(21, 30, 18, .78); }
.gp .pcard__photo figcaption a { color: var(--lime-100); }
.gp .pcard__photo--none { display: grid; place-content: center; justify-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-sm); }
.gp .pcard__photo--none svg { width: 44px; height: 44px; color: var(--fern-600); }
.gp .pcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.gp .pcard h3 { margin: 0; font-size: var(--fs-lg); }
.gp .pcard .bot { margin: 0; color: var(--fg-2); }
.gp .status { max-width: none; }
.gp .pcard .status { align-self: flex-start; margin: 0; padding: 2px 10px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; }
.gp .pcard .status--review { background: var(--cream-200); color: var(--fg-1); }
.gp .traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gp .traits li { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 2px 9px; border: 1px solid var(--gp-line); border-radius: var(--radius-pill); color: var(--fg-2); }
.gp .pcard .actions { margin-top: auto; padding-top: var(--space-3); }
.gp .pcard .actions .gp-btn { flex: 1 1 110px; }
.gp .pcard details { border-top: 1px solid var(--gp-line); }

/* ---- calendar, hardiness, care ---- */
.gp .cal__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.gp .cal__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.gp .cal__nav h2 { margin: 0; min-width: 8em; text-align: center; font-size: var(--fs-h3); }
.gp .cal__season { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.gp .cal__season .note { margin: 0; }
.gp .mstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; margin-bottom: var(--space-4); }
.gp .mstrip__m { min-height: var(--tap); padding: 0 4px; border: 1px solid var(--border-2); background: var(--white); border-radius: var(--gp-ctl-r); text-transform: capitalize; }
.gp .mstrip__m[aria-current="date"] { box-shadow: inset 0 -3px 0 var(--tico-yellow); }
.gp .gchips--cat { margin-bottom: var(--space-3); }
.gp .wgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }
.gp .wcard { border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: var(--space-4); background: var(--cream-100); min-width: 0; }
.gp .wcard h3 { font-size: var(--fs-body); margin: 0 0 var(--space-2); }
.gp .wcard p { margin: 0 0 var(--space-2); font-size: var(--fs-btn-md); }
.gp .hz { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.gp .hz__c { border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: var(--space-4) var(--space-5); background: var(--cream-100); }
.gp .hz__c h3 { font-size: var(--fs-body); }
.gp .hz__c p { font-size: var(--fs-btn-md); margin: 0; }

/* ---- plan ---- */
.gp .plan { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: var(--space-5) var(--space-6); align-items: start; }
.gp .plan__main, .gp .plan__side { min-width: 0; }
.gp .plan__side .sendcard { border: 2px solid var(--fern-600); }
.gp .prow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) auto; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--gp-line); align-items: start; }
.gp .prow:first-of-type { border-top: 0; }
.gp .prow__t h4 { margin: 0; } .gp .prow__t .bot { margin: 0; }
.gp .prow__f { display: grid; gap: var(--space-3); }
.gp .prow__q { display: grid; gap: var(--space-2); justify-items: end; text-align: right; }
.gp .prow__q p { margin: 0; }
.gp .bedlines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gp .bedlines li { padding: var(--space-3) var(--space-4); background: var(--cream-100); border-radius: var(--gp-ctl-r); }
.gp .btngrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }

/* ---- page furniture around the tools ---- */
.plan-attach[hidden] { display: none !important; }
.plan-attach { border: var(--border-w-ui) dashed var(--fern-600); border-radius: var(--radius-2); padding: var(--space-4); background: var(--lime-100); }
.plan-attach textarea { min-height: 240px; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.plan-attach .hint { color: var(--forest-800); }

@media (max-width: 1000px) {
    .gp .calc, .gp .plan, .gp .two { grid-template-columns: 1fr; }
    .gp .calc__result { position: static; }
    .gp .fields--3 { grid-template-columns: 1fr 1fr; }
    .gp .fields--3 .space { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 767px) {
    .gp .fields--3, .gp .fields--2 { grid-template-columns: 1fr 1fr; }
    .gp .fields { grid-template-columns: 1fr; }
    .gp .fields--3 .space { order: 0; }
    .gp .bed__grid { grid-template-columns: 1fr; }
    .gp .bedmats { grid-template-columns: 1fr; }
    .gp .bed__diagram { display: none; }
    .gp .bed__sum { grid-template-columns: 1fr; } .gp .bed__tags { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 4px; }
    .gp .prow { grid-template-columns: 1fr; } .gp .prow__q { justify-items: start; text-align: left; }
    .gp .mstrip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .gp .pgrid { grid-template-columns: 1fr; }
    .gp .calc-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: sticky; top: calc(var(--header-h) + 6px); z-index: 5; grid-column: 1; margin: 0 0 var(--space-3); min-height: var(--tap); padding: 8px var(--space-4); font: inherit; font-size: var(--fs-btn-sm); text-align: left; color: var(--cream-100); background: var(--fern-700); border: 0; border-radius: var(--radius-pill); box-shadow: 0 6px 16px rgba(28, 40, 24, .25); cursor: pointer; }
    .gp .calc-bar strong { color: var(--lime-100); }
    .gp .calc-bar__go { white-space: nowrap; font-weight: var(--fw-bold); }
    .gp .btngrid { grid-template-columns: 1fr; }
    .gp .panel, .gp .step { padding: var(--space-4); }
    .gp .cal__nav { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .gp .cal__nav h2 { grid-column: 1 / -1; order: -1; min-width: 0; text-align: center; }
}
html:has(.gp) { scroll-padding-bottom: calc(var(--call-bar-h) + var(--space-5)); }

@media print {
    .site-header, .site-footer, .banner, .call-bar, .consent, .skip, .gp-hero, .gp-after, .gp-section:not(.gp-app-section), .quote, #contact, .gp .screen-only { display: none !important; }
    body, .gp-app-section { background: #fff !important; color: #000 !important; padding: 0 !important; }
    .gp .print-only { display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: 11pt/1.5 var(--font-body); color: #000; }
    .gp .print-only a { color: #000; }
}

.gp .vt.is-on .count { background: rgba(246, 242, 230, .25); color: var(--cream-100); }
.gp .btngrid + .note { margin-top: var(--space-3); }
.gp-hero .crumbs ol { font-size: 13px; }
.gp-hero .mega--tool em { font-size: .78em; }
.gp .seg-group { border-radius: 24px; }
.gp .big { margin: var(--space-4) 0 var(--space-1); }
.gp .qty .big { margin: 0; }

/* =====================================================================================================================
   Round 2 (Oct 12 2026): seasonal dashboard, planting months, illustrated hardiness, spacing diagram, project summary, photo-led finder
   ===================================================================================================================== */
.gp { --s-spring: #5f8a2f; --s-spring-bg: #e6f1cc; --s-summer: #a67c00; --s-summer-bg: #fbeebb; --s-fall: #a14a20; --s-fall-bg: #f5dac8; --s-winter: #3f5b66; --s-winter-bg: #dce7ea; --k-plant: #435a39; --k-prep: #a67c00; --k-assess: #2b6f8e; }
.gp .gico { width: 1.2em; height: 1.2em; flex: none; }
.gp .badge--now { background: var(--tico-yellow); color: var(--charcoal); }
.gp .linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: var(--fw-semibold); color: var(--fern-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 0; }

/* ---- seasonal dashboard ---- */
.gp .sdash { background: var(--sbg, var(--s-spring-bg)); border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: clamp(18px, 2.6vw, 30px); margin-bottom: var(--space-5); display: grid; gap: var(--space-5); }
.gp .sdash.s-spring { --sbg: var(--s-spring-bg); --sac: var(--s-spring); } .gp .sdash.s-summer { --sbg: var(--s-summer-bg); --sac: var(--s-summer); } .gp .sdash.s-fall { --sbg: var(--s-fall-bg); --sac: var(--s-fall); } .gp .sdash.s-winter { --sbg: var(--s-winter-bg); --sac: var(--s-winter); }
.gp .sdash__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.gp .sdash h2 { font-family: var(--font-condensed); text-transform: uppercase; font-weight: 400; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: 0; margin: var(--space-3) 0 var(--space-2); color: var(--sac); }
.gp .sdash__range { font-weight: var(--fw-bold); color: var(--fg-1); margin: 0 0 var(--space-3); }
.gp .sdash__line { font-family: var(--font-serif, "Instrument Serif", serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.25; color: var(--fg-1); max-width: 24em; }
.gp .sdash__rule { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); color: var(--fg-1); background: rgba(255, 255, 255, .6); border-radius: var(--gp-ctl-r); padding: 10px 14px; max-width: none; }
.gp .sdash__rule .gico { color: var(--sac); margin-top: 2px; }
.gp .sdash__fig { margin: 0; border-radius: var(--gp-r); overflow: hidden; background: var(--white); }
.gp .sdash__fig img, .gp .sdash__fig picture, .gp .winter-art { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gp .sdash__fig figcaption { font-size: var(--fs-xs); color: var(--fg-3); padding: 8px 12px; background: var(--white); }
.gp .sdash__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gp .stab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 var(--space-4); font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-btn-sm); color: var(--fg-1); background: rgba(255, 255, 255, .7); border: 2px solid transparent; border-radius: var(--radius-pill); cursor: pointer; }
.gp .stab small { font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .06em; background: var(--tico-yellow); border-radius: var(--radius-pill); padding: 1px 7px; }
.gp .stab.is-on { background: var(--white); border-color: var(--charcoal); }
.gp .stab.s-spring .gico { color: var(--s-spring); } .gp .stab.s-summer .gico { color: var(--s-summer); } .gp .stab.s-fall .gico { color: var(--s-fall); } .gp .stab.s-winter .gico { color: var(--s-winter); }
.gp .catblock__h { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-4); }
.gp .catblock__h .gico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--lime-100); color: var(--fern-700); }
.gp .tgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--space-4); }
.gp .tcard { border: 1px solid var(--gp-line); border-radius: var(--gp-r); padding: var(--space-4); background: var(--cream-100); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.gp .tcard h4 { font-size: var(--fs-lg); margin: 0; }
.gp .tcard__dl { margin: 0; display: grid; gap: var(--space-3); }
.gp .tcard__dl dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--fern-700); }
.gp .tcard__dl dd { margin: 2px 0 0; color: var(--fg-1); }
.gp .kindtag { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--gp-line); color: var(--fg-1); }
.gp .kind-plant .gico, .gp .kindtag.kind-plant .gico { color: var(--k-plant); } .gp .kind-prep .gico { color: var(--k-prep); } .gp .kind-assess .gico { color: var(--k-assess); }
.gp .glinks { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: var(--space-2); }
.gp .glink { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fern-700); text-decoration: underline; text-underline-offset: 3px; }
.gp .helpstrip { background: var(--lime-100); border-color: transparent; }
.gp .helpstrip h3 { display: flex; gap: 8px; align-items: center; }
.gp .helpstrip__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }

/* ---- planting months ---- */
.gp .mstrip__m { display: grid; gap: 4px; justify-items: center; align-content: center; }
.gp .mstrip__m.s-spring { background: var(--s-spring-bg); } .gp .mstrip__m.s-summer { background: var(--s-summer-bg); } .gp .mstrip__m.s-fall { background: var(--s-fall-bg); } .gp .mstrip__m.s-winter { background: var(--s-winter-bg); }
.gp .mstrip__m.is-on { background: var(--fern-700); }
.gp .dots { display: flex; gap: 3px; height: 8px; } .gp .dots b, .gp .mlegend b { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(34, 40, 41, .35); background: transparent; display: inline-block; }
.gp .dots b.on, .gp .mlegend b.on { border-color: transparent; } .gp .d-plant.on { background: var(--k-plant) !important; } .gp .d-prep.on { background: #d9a400 !important; } .gp .d-assess.on { background: var(--k-assess) !important; }
.gp .mstrip__m.is-on .dots b { border-color: rgba(246, 242, 230, .6); } .gp .mstrip__m.is-on .dots b.on { border-color: var(--cream-100); }
.gp .mlegend { display: flex; gap: var(--space-4); font-size: var(--fs-xs); color: var(--fg-2); margin: 0 0 var(--space-3); } .gp .mlegend span { display: inline-flex; gap: 6px; align-items: center; }
.gp .badge--s { display: inline-flex; gap: 6px; align-items: center; } .gp .badge--s.s-spring { background: var(--s-spring-bg); } .gp .badge--s.s-summer { background: var(--s-summer-bg); } .gp .badge--s.s-fall { background: var(--s-fall-bg); } .gp .badge--s.s-winter { background: var(--s-winter-bg); }
.gp .gchips--icons .chip-t { display: inline-flex; align-items: center; gap: 8px; }
.gp .chip-t.is-on .gico { color: var(--lime-100); }
.gp .musts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); }
.gp .musts li { display: flex; gap: 12px; align-items: flex-start; background: var(--cream-100); border-radius: var(--gp-r); padding: var(--space-3) var(--space-4); }
.gp .musts li .gico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--white); color: var(--fern-700); }
.gp .musts li span { display: grid; font-size: var(--fs-sm); color: var(--fg-2); } .gp .musts li strong { color: var(--fg-1); font-size: var(--fs-body); }
.gp .lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.gp .lane { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.gp .lane > h4 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; padding-bottom: var(--space-2); border-bottom: 3px solid var(--lc); }
.gp .lane > h4 .gico { align-self: center; color: var(--lc); } .gp .lane > h4 small { font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--fg-3); }
.gp .lane-plant { --lc: var(--k-plant); } .gp .lane-prep { --lc: #d9a400; } .gp .lane-assess { --lc: var(--k-assess); }
.gp .lane__empty { margin: 0; }
.gp .wcard { border-left: 4px solid var(--lc, var(--gp-line)); }
.gp .wcard h4 { font-size: var(--fs-body); margin: 0 0 var(--space-2); }
.gp .conds { margin: 0 0 var(--space-2); padding-left: 1.1em; font-size: var(--fs-sm); color: var(--fg-2); } .gp .conds li { margin: 2px 0; }
.gp .pphotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.gp .pphoto { margin: 0; border-radius: var(--gp-r); overflow: hidden; border: 1px solid var(--gp-line); background: var(--white); }
.gp .pphoto img, .gp .pphoto picture { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gp .pphoto figcaption { display: grid; gap: 2px; padding: 8px 12px 10px; font-size: var(--fs-sm); } .gp .pphoto figcaption span { font-size: 11px; color: var(--fg-3); }

/* ---- hardiness ---- */
.gp .hzcmp { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.gp .hzcmp__c { border-radius: var(--gp-r); padding: var(--space-5); position: relative; }
.gp .hzcmp__c--ca { background: var(--lime-100); } .gp .hzcmp__c--us { background: var(--s-winter-bg); }
.gp .hzcmp__flag { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .1em; background: var(--white); padding: 2px 8px; border-radius: var(--radius-pill); }
.gp .hzcmp__c h3 { margin-bottom: var(--space-2); } .gp .hzcmp__c p { margin: 0; color: var(--fg-1); }
.gp .hzcmp__ne { align-self: center; font-size: 40px; font-weight: var(--fw-bold); color: var(--roast-600); }
.gp .hznever { display: flex; gap: 10px; align-items: flex-start; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--gp-ctl-r); background: #fdecdc; color: #5b2a10; max-width: none; font-weight: var(--fw-semibold); }
.gp .hexgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
.gp .hex { margin: 0; border: 1px solid var(--gp-line); border-radius: var(--gp-r); overflow: hidden; background: var(--white); display: flex; flex-direction: column; }
.gp .hex__img { aspect-ratio: 4 / 3; background: var(--cream-200); } .gp .hex__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gp .hex figcaption { padding: var(--space-3) var(--space-4); display: grid; gap: 4px; font-size: var(--fs-sm); color: var(--fg-2); }
.gp .hex__k { align-self: start; font-size: 11px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--lime-100); color: var(--forest-900); }
.gp .hex small { font-size: 11px; color: var(--fg-3); }
.gp .microwrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.gp .micro { width: 100%; height: auto; }
.gp .microlist, .gp .hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.gp .microlist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); color: var(--fg-1); }
.gp .stepn { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fern-700); color: var(--cream-100); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.gp .stepn--1 { background: #2f5d3a; } .gp .stepn--2, .gp .stepn--3 { background: #2b6f8e; } .gp .stepn--4 { background: #8c4a35; } .gp .stepn--5 { background: #5b6770; } .gp .stepn--6 { background: #7a5a3a; }
.gp .hsteps li { display: flex; gap: 14px; align-items: flex-start; } .gp .hsteps li div { display: grid; gap: 2px; } .gp .hsteps strong { font-size: var(--fs-body); } .gp .hsteps span:not(.stepn) { color: var(--fg-2); font-size: var(--fs-btn-md); }

/* ---- spacing ---- */
.gp .sp-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.gp .sp-top__f { margin: 0; border-radius: var(--gp-r); overflow: hidden; background: var(--cream-100); }
.gp .sp-top__f img, .gp .sp-top__f picture { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .gp .sp-top__f figcaption { font-size: var(--fs-sm); color: var(--fg-2); padding: 10px 14px; }
.gp .jobgrid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.3fr); gap: var(--space-5); align-items: start; }
.gp .jobfields { display: grid; gap: var(--space-4); min-width: 0; }
.gp .fgroup { display: grid; gap: 6px; }
.gp .job { background: var(--white); padding: var(--space-5); }
.gp .jobres { min-width: 0; }
.gp .jobres__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px var(--space-4); margin-bottom: var(--space-2); }
.gp .jobres__n { margin: 0; } .gp .jobres__n strong { font-size: clamp(36px, 5vw, 52px); line-height: 1; color: var(--fern-700); } .gp .jobres__n span { font-weight: var(--fw-semibold); }
.gp .jobres__plant { display: flex; gap: 10px; align-items: center; margin: 0 0 0 auto; } .gp .jobres__plant span { display: grid; line-height: 1.2; font-size: var(--fs-sm); } .gp .jobres__plant i { color: var(--fg-3); }
.gp .spsvg { width: 100%; height: auto; background: var(--cream-100); border-radius: var(--gp-r); }
.gp .sp-arrow path, .gp .sp-dim path, .gp .sp-half { fill: none; stroke: #8c4a35; stroke-width: 2; stroke-linecap: round; } .gp .sp-half { stroke-dasharray: 4 4; }
.gp .sp-arrow text, .gp .sp-dim text { font: 700 13px var(--font-body); fill: #5b2a10; }
.gp .scalenote { margin: var(--space-2) 0 0; }
.gp .spempty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--space-5); align-items: center; }
.gp .sp-total .big { margin: 0; }
.gp .big__u { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.gp .pthumb { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; flex: none; background: var(--cream-200); } .gp .jobres__plant .pthumb { width: 40px; height: 30px; }
.gp .pthumb--none { display: inline-grid; place-items: center; color: var(--fern-600); } .gp .pthumb--none svg { width: 60%; height: 60%; }

/* ---- project summary ---- */
.gp .psum__top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; margin-bottom: var(--space-4); }
.gp .psum__t h3 { font-size: var(--fs-h3); margin: 4px 0 var(--space-3); overflow-wrap: anywhere; }
.gp .mosaic { display: flex; flex-wrap: wrap; gap: 6px; } .gp .mosaic .pthumb { width: 64px; height: 48px; }
.gp .stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--space-3); }
.gp .stats li { background: var(--lime-100); border-radius: var(--gp-r); padding: var(--space-3) var(--space-4); display: grid; } .gp .stats strong { font-size: 30px; line-height: 1.1; color: var(--fern-700); } .gp .stats span { font-size: var(--fs-xs); color: var(--fg-2); }
.gp .prow { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1.4fr) auto; }
.gp .bedlines2 { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: var(--space-2); }
.gp .bedlines2 li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--gp-line); border-radius: var(--gp-ctl-r); } .gp .bedlines2 li > span:nth-child(2) { color: var(--fg-2); font-size: var(--fs-sm); } .gp .bedtags { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.gp .empty--cta { text-align: left; } .gp .empty--cta p { margin: 0 0 var(--space-2); }
.gp .todo { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 2px; }
.gp .todo__c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.gp .todo__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.gp .photonote { display: flex; gap: 10px; align-items: flex-start; background: var(--lime-100); padding: var(--space-3) var(--space-4); border-radius: var(--gp-ctl-r); color: var(--forest-900); max-width: none; font-size: var(--fs-sm); }
.gp .photonote .gico { margin-top: 2px; color: var(--fern-700); }

/* ---- finder: icon controls ---- */
.gp .fprimary { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.gp .seg-group--icons { display: flex; flex-wrap: wrap; border-radius: 24px; }
.gp .seg-group--icons .seg span { gap: 6px; padding: 0 var(--space-3); }
.gp .seg-group--icons .seg em { font-style: normal; }
.gp .seg input:checked + span .gico { color: var(--lime-100); }

/* ---- "from plan to project" ---- */
.gp-next .nx-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); counter-reset: nx; }
.gp-next .nx { display: grid; gap: var(--space-2); align-content: start; min-width: 0; position: relative; }
.gp-next .nx__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--fern-700); color: var(--cream-100); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.gp-next .nx__l { margin: 0; font-weight: var(--fw-bold); }
.gp-next .nx-card { display: grid; background: var(--white); border: 1px solid var(--border-1); border-radius: var(--radius-4); overflow: hidden; text-decoration: none; color: inherit; height: 100%; }
.gp-next .nx-card:hover { border-color: var(--fern-600); }
.gp-next .nx-card__img { aspect-ratio: 16 / 10; background: var(--cream-200); } .gp-next .nx-card__img picture, .gp-next .nx-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gp-next .nx-card__b { padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.gp-next .nx-card__b h3 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0; } .gp-next .nx-card__b p { margin: 0; color: var(--fg-2); }
.gp-next .guide-card { height: 100%; }

@media (max-width: 1000px) {
    .gp .sdash__top, .gp .sp-top, .gp .spempty, .gp .psum__top, .gp .microwrap, .gp .jobgrid, .gp .fprimary { grid-template-columns: 1fr; }
    .gp .lanes { grid-template-columns: 1fr; }
    .gp-next .nx-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .gp .hzcmp { grid-template-columns: 1fr; } .gp .hzcmp__ne { justify-self: center; }
    .gp .prow { grid-template-columns: auto minmax(0, 1fr); } .gp .prow__f, .gp .prow__q { grid-column: 1 / -1; }
    .gp .sdash__tabs .stab { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .gp .seg-group--icons .seg span { padding: 0 var(--space-3); }
}
.gp .guidance:has(.gico) { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-4); } .gp .guidance .gico { margin-top: 2px; }
.gp .jobfields .seg-group { display: grid; border-radius: 16px; } .gp .jobfields .seg span { white-space: normal; line-height: 1.25; padding-block: 8px; }
.gp .job + .actions, .gp .actions + .sp-total { margin-bottom: var(--space-4); }
.gp .conds { list-style: disc; }

/* Reserve the tool's space while it loads so the "from plan to project" strip does not jump (layout shift); only when scripting is on. */
@media (scripting: enabled) { #app.gp:has(> .gp-loading) { min-height: 100vh; } }

/* Photo browsing controls stay readable and tappable on small screens. */
@media (max-width: 600px) {
  .gp .rhead__r { width: 100%; }
  .gp .vtoggle { display: flex; flex-wrap: wrap; width: 100%; border-radius: 16px; }
  .gp .vt { flex: 1 1 140px; padding: 8px 12px; }
}