/* --- Design tokens & button philosophy (2026-08-10) ---
 * Master guide: docs/STYLING.md  |  Roadmap: N10 (UI-PR0…PR4)
 * Character: organic / nature-inspired farm chrome; map heuristics keep strong multi-hue fills.
 *
 * Brand roles
 *   sage   — header/footer banner chrome (softer decorative strip)
 *   olive  — top menu bar + primary actions (same family as nav rgb(69,99,17))
 *   danger — terracotta: destructive actions; also nav item hover/active accent
 *   tool   — dark slate-blue: UI reveal / tools (not data commits)
 *
 * Button roles (farm app chrome — shop POS stays in shop_kiosk.css)
 *   Primary  — olive fill: Save / Update / Add / main CTAs / harvest add
 *   Danger   — terracotta: Delete / Deactivate / purge / cancel transfer
 *   Quiet    — light sage-gray: Back / Cancel / Clear / i18n Remove
 *   Tool     — slate-blue: Show/Hide pattern, Colouring Details, search,
 *              sat Load, harvest clock, seed “recent vars”, field-points tools
 *
 * Segmented map chrome (not full-width form buttons)
 *   zone-mode active → olive (Browse|Edit product state)
 *   zone-tool active → tool blue (pan/zoom/draw tools)
 *   zone-draw-icon-btn → neutral gray icon chips; confirm/cancel tinted
 *   color-select / seed-inv trash → feature-local (not form roles)
 *
 * Why olive for primary (not Material #4CAF50, not banner sage)?
 *   Navbar is the strongest interactive chrome; matching it unifies “do it”
 *   with product identity. Sage is too soft for CTAs.
 *
 * Token bug fixed: many CTAs used var(--secondary-color, #6b8f3c) expecting
 * green, but --secondary-color is terracotta. Primary fills use --btn-primary-*.
 */
:root {
  --brand-sage: #9bb073;
  --brand-olive: #456311; /* navbar: rgb(69, 99, 17) */
  --brand-olive-hover: #3a540e;
  --brand-olive-soft: #6b8f3c; /* mid green for chips/borders (lighter than full olive) */
  --brand-danger: #b83e2d;
  --brand-danger-hover: #9a3426;
  --brand-tool: #2c3e50; /* dark slate — tool / reveal chrome */
  --brand-tool-hover: #1a252f;
  --brand-tool-active: #3d5a80; /* map-tool active (slightly brighter slate) */
  --brand-tool-focus: #5b9bd5;

  /* Semantic buttons */
  --btn-primary-bg: var(--brand-olive);
  --btn-primary-hover: var(--brand-olive-hover);
  --btn-primary-fg: #ffffff;
  --btn-danger-bg: var(--brand-danger);
  --btn-danger-hover: var(--brand-danger-hover);
  --btn-danger-fg: #ffffff;
  --btn-quiet-bg: #f4f6f0;
  --btn-quiet-fg: #2f3d28;
  --btn-quiet-border: rgba(60, 80, 50, 0.28);
  --btn-quiet-hover-bg: #e8ece2;
  --btn-tool-bg: var(--brand-tool);
  --btn-tool-hover: var(--brand-tool-hover);
  --btn-tool-fg: #ffffff;
  --btn-tool-border: var(--brand-tool);
  --btn-tool-focus: var(--brand-tool-focus);
  --btn-radius: 4px;
  --btn-font-size: 18px;
  --btn-padding-y: 0.35em;
  --btn-padding-x: 0.75em;

  /* Legacy aliases — keep names for older rules */
  --primary-color: var(--brand-sage);
  --secondary-color: var(--brand-danger);
  /* Was Material #4CAF50; now action brand so old button uses stay on-philosophy */
  --hover-color: var(--brand-olive);

  --text-color: #202020;
  --font-family: Arial, sans-serif;
  --background-light: aliceblue;

  /* Surfaces / forms (UI-PR2) — organic earth-sage panels, shared density */
  --surface-panel-bg: #f6f8f3;
  --surface-panel-bg-soft: #f7faf4;
  --surface-panel-border: #c5cfc0;
  --surface-panel-border-soft: #c5d0b8;
  --surface-panel-radius: 6px;
  --surface-title: #3a4a30;
  --surface-text-muted: #4a5a40;
  --surface-divider: #dce4d4;
  --surface-input-bg: #ffffff;
  --surface-input-border: #c5cfc0;
  --surface-input-radius: 4px;
  --surface-input-pad-y: 0.45em;
  --surface-input-pad-x: 0.55em;
  --surface-focus-ring: #8aaa6a;
  --surface-focus-border: var(--brand-olive-soft);
  --surface-msg-bg: #eef6e8;
  --surface-msg-border: #c5cfc0;
  --surface-warn-bg: #fff8e8;
  --surface-warn-border: #e0c88a;
  --surface-error-bg: #faf6f5;
  --surface-error-border: #d0a8a0;
  --surface-table-row: #ebebeb;
  --surface-table-alt: #f4f6f0;
  --surface-table-hover: #d5e3c8;
  --surface-table-head: var(--brand-sage);
  --form-label-size: 0.9em;
  --form-label-color: #3a4a30;
  --form-field-gap: 0.35em;
  --form-section-gap: 0.75em;

  /* Spacing scale (4px base) — prefer for new UI */
  --space-1: 0.25rem; /* 4 */
  --space-2: 0.5rem;  /* 8 */
  --space-3: 0.75rem; /* 12 */
  --space-4: 1rem;    /* 16 */
  --space-5: 1.5rem;  /* 24 */
  --space-6: 2rem;    /* 32 */

  /* Type */
  --type-body: 1.25rem; /* ~20px shell */
  --type-sm: 1rem;      /* ~16px forms */
  --type-btn: 1.125rem; /* ~18px */
  --type-xs: 0.85rem;

  /* Elevation (soft earth shadow, not Material purple) */
  --shadow-sm: 0 1px 2px rgba(60, 80, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(60, 90, 40, 0.1);
  --shadow-lg: 0 8px 24px rgba(40, 55, 30, 0.16);

  /* Motion */
  --motion-fast: 0.15s;
  --motion-med: 0.2s;
  --ease-standard: ease;

  /* Touch */
  --touch-min: 2.75rem; /* ~44px */

  /* Stacking scale — use these in new rules */
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 5;
  --z-dropdown: 1000;
  --z-dropdown-more: 1100;
  --z-popover: 1200;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-max: 10000;
}

/* Reduced motion: kill non-essential animation/transition (maps/tools keep usability) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Base reset & typography --- */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  font-size: 20px;
  margin: 0;
}

pre {
  font-family: var(--font-family);
  margin: 0px;
  padding: 0px;
  outline: 0px;
  text-align: left;
  white-space: pre-wrap;
}

h1,
h2,
h3,
h4 {
  margin-top: 10px;
  margin-bottom: 5px;
  padding: 0;
  text-align: left;
}

h1 {
  font-size: 28px;
  text-align: center;
}

h2 {
  font-size: 24px;
}

h3 {
  font-size: 20px;
}

h4 {
  font-size: 18px;
}

p {
  margin-bottom: 3px;
  padding: 0;
  font-size: 16px;
  text-align: left;
}

p.var_card {
  margin: 2px;
  padding: 0px;
  outline: 0px;
  text-align: left;
}

/* --- Buttons (global) ---
 * Default interactive controls share primary olive (navbar family).
 * Opt into danger / quiet with classes. Nav dropbtn + feature widgets re-skin below.
 */
button,
.custom-button,
input[type='submit'],
a.button,
.button,
button.primary,
button.btn-primary {
  display: inline-block;
  box-sizing: border-box;
  width: auto;
  margin: 0;
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-size: var(--btn-font-size);
  font-family: inherit;
  line-height: 1.25;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition:
    background-color var(--motion-med) var(--ease-standard),
    border-color var(--motion-med) var(--ease-standard),
    color var(--motion-med) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

button:hover,
.custom-button:hover,
input[type='submit']:hover,
a.button:hover,
.button:hover,
button.primary:hover,
button.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  color: var(--btn-primary-fg);
}

/* Keyboard focus — do not remove without replacement */
button:focus-visible,
.custom-button:focus-visible,
input[type='submit']:focus-visible,
a.button:focus-visible,
.button:focus-visible,
button.primary:focus-visible,
button.btn-primary:focus-visible,
button.btn-danger:focus-visible,
button.btn-quiet:focus-visible,
button.btn-secondary:focus-visible,
a.ua-submit:focus-visible,
input.ua-submit:focus-visible {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 2px;
}

button:disabled,
.custom-button:disabled,
input[type='submit']:disabled,
button.primary:disabled,
button.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.2);
}

/* Danger — delete / deactivate / purge */
button.btn-danger,
button.ref-btn-danger,
button.ref-btn-delete,
.custom-button.ref-btn-delete,
button.zone-act-delete,
input.ua-submit-danger,
.ua-submit.ua-submit-danger {
  background-color: var(--btn-danger-bg) !important;
  color: var(--btn-danger-fg) !important;
  border-color: transparent;
}

button.btn-danger:hover,
button.ref-btn-danger:hover,
button.ref-btn-delete:hover,
.custom-button.ref-btn-delete:hover,
button.zone-act-delete:hover,
input.ua-submit-danger:hover,
.ua-submit.ua-submit-danger:hover {
  background-color: var(--btn-danger-hover) !important;
  color: var(--btn-danger-fg) !important;
  filter: none;
}

/* Quiet — back / cancel / clear / non-commit secondary */
button.btn-secondary,
button.btn-quiet,
.custom-button.btn-secondary,
.custom-button.btn-quiet,
input.ua-submit.btn-quiet,
.ua-submit.btn-quiet,
a.ua-submit.btn-quiet,
#zone_top_size_cancel,
#nc_clear,
button.i18n-map-remove,
.custom-button.i18n-map-remove {
  background-color: var(--btn-quiet-bg) !important;
  color: var(--btn-quiet-fg) !important;
  border: 1px solid var(--btn-quiet-border) !important;
  font-weight: 600;
}

button.btn-secondary:hover,
button.btn-quiet:hover,
.custom-button.btn-secondary:hover,
.custom-button.btn-quiet:hover,
input.ua-submit.btn-quiet:hover,
.ua-submit.btn-quiet:hover,
a.ua-submit.btn-quiet:hover,
#zone_top_size_cancel:hover,
#nc_clear:hover,
button.i18n-map-remove:hover,
.custom-button.i18n-map-remove:hover {
  background-color: var(--btn-quiet-hover-bg) !important;
  color: var(--btn-quiet-fg) !important;
  filter: none;
}

/* Tool — reveal panels / utility (NOT data commits). Same lane for
 * Colouring Details and Show/Hide pattern so they never diverge by accident. */
button.btn-tool,
.custom-button.btn-tool,
input.ua-submit.btn-tool,
.ua-submit.btn-tool,
button.ua-submit.btn-tool,
#show_pattern,
#hide_pattern,
#recent_vars_toggle,
#harvest_clock_start,
.field-zone-color-toggle,
button.zarea-search-btn,
#zsat_load,
button.field-points-tool {
  background-color: var(--btn-tool-bg) !important;
  color: var(--btn-tool-fg) !important;
  border: 1px solid var(--btn-tool-border) !important;
  font-weight: 600;
}

button.btn-tool:hover,
button.btn-tool:focus-visible,
.custom-button.btn-tool:hover,
.custom-button.btn-tool:focus-visible,
input.ua-submit.btn-tool:hover,
.ua-submit.btn-tool:hover,
button.ua-submit.btn-tool:hover,
button.ua-submit.btn-tool:focus-visible,
#show_pattern:hover,
#show_pattern:focus-visible,
#hide_pattern:hover,
#hide_pattern:focus-visible,
#recent_vars_toggle:hover,
#recent_vars_toggle:focus-visible,
#harvest_clock_start:hover,
#harvest_clock_start:focus-visible,
.field-zone-color-toggle:hover,
.field-zone-color-toggle:focus-visible,
button.zarea-search-btn:hover,
button.zarea-search-btn:focus-visible,
#zsat_load:hover,
#zsat_load:focus-visible,
button.field-points-tool:hover,
button.field-points-tool:focus-visible {
  background-color: var(--btn-tool-hover) !important;
  border-color: var(--btn-tool-hover) !important;
  color: var(--btn-tool-fg) !important;
  outline: 2px solid var(--btn-tool-focus);
  outline-offset: 2px;
  filter: none;
}

/* Danger extras (class + known delete submit names) */
input[type='submit'].planting_delete,
.planting-form input[type='submit'].planting_delete,
button[name='zone_transfer_cancel'] {
  background-color: var(--btn-danger-bg) !important;
  color: var(--btn-danger-fg) !important;
  border-color: transparent !important;
}

input[type='submit'].planting_delete:hover,
.planting-form input[type='submit'].planting_delete:hover,
button[name='zone_transfer_cancel']:hover {
  background-color: var(--btn-danger-hover) !important;
  color: var(--btn-danger-fg) !important;
}

/* Quiet extras */
button[name='zone_transfer_reject'] {
  background-color: var(--btn-quiet-bg) !important;
  color: var(--btn-quiet-fg) !important;
  border: 1px solid var(--btn-quiet-border) !important;
}

button[name='zone_transfer_reject']:hover {
  background-color: var(--btn-quiet-hover-bg) !important;
}

/* --- Shared form & panel chrome (UI-PR2) ---
 * Catalog / harvest items / notes / pots / account panels share density + earth-sage surfaces.
 * Feature shells still scope behaviour; colours/spacing use tokens above.
 */

/* Feedback banners (UI-PR3) — soft earth-sage default; warn/error variants */
.ref-msg,
.ua-msg {
  color: var(--surface-title);
  background: var(--surface-msg-bg);
  border: 1px solid var(--surface-msg-border);
  border-left: 4px solid var(--brand-olive-soft);
  padding: 0.55em 0.85em;
  border-radius: var(--surface-input-radius);
  margin: 0 0 0.85em;
  line-height: 1.45;
  box-shadow: var(--shadow-sm);
}

/* Empty feedback must not reserve chrome (farm + any shared class) */
.ref-msg:empty,
.ua-msg:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  min-height: 0;
}

.ref-msg--ok,
.ua-msg--ok {
  border-left-color: var(--brand-olive);
}

.ref-msg--info,
.ua-msg--info {
  background: #eef4f8;
  border-color: #c5d4e0;
  border-left-color: var(--brand-tool-active);
  color: #1e3a4a;
}

.ref-msg--warn,
.ua-msg--warn {
  background: var(--surface-warn-bg);
  border-color: var(--surface-warn-border);
  border-left-color: #c9a227;
  color: #5a4a18;
}

.ref-msg--error,
.ua-msg--error,
.ref-msg.is-error,
.ua-msg.is-error {
  background: var(--surface-error-bg);
  border-color: var(--surface-error-border);
  border-left-color: var(--brand-danger);
  color: #5a3028;
}

.ref-hint {
  font-size: 0.8em;
  opacity: 0.8;
  margin: 0.2em 0 0.55em;
  color: var(--surface-text-muted);
  line-height: 1.35;
}

/* Catalog / harvest-item forms */
.ref-picker {
  margin-bottom: var(--form-section-gap);
  padding-bottom: 0.75em;
  border-bottom: 1px solid var(--surface-divider);
}

.ref-picker h3,
.grid_main2r > h3 {
  margin-top: 0;
  color: var(--surface-title);
}

.ref-picker label,
.ref-form label {
  display: block;
  margin-top: 0.5em;
  font-size: var(--form-label-size);
  color: var(--form-label-color);
  font-weight: 500;
}

.ref-picker input[type='search'],
.ref-picker select,
.ref-form input[type='text'],
.ref-form input[type='number'],
.ref-form input[type='color'],
.ref-form select,
.ref-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.2em 0 0.4em;
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
  font: inherit;
  color: var(--text-color);
}

.ref-picker input:focus,
.ref-picker select:focus,
.ref-form input:focus,
.ref-form select:focus,
.ref-form textarea:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}

#ref_select {
  min-height: 10em;
}

#hi_item_list {
  width: 100%;
  min-height: 12em;
}

.hi-var-picker {
  margin-bottom: var(--space-3, 0.75rem);
}

.ref-actions {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
}

.ref-id-line {
  margin: 0.5em 0;
  font-size: 0.92em;
  color: var(--surface-text-muted);
}

/* Catalog colour field: hosts shared ColorSelect */
.ref-color-row {
  display: block;
  margin: 0.2em 0 0.4em;
}
.ref-color-row .color-select,
.ref-color-row .zone-color-picker {
  width: 100%;
  max-width: 100%;
}
.ref-form .ref-color-row .color-select-text,
.ref-form .ref-color-row .zone-color-text {
  width: 8.5em !important;
  max-width: 12em !important;
  flex: 1 1 6em;
  margin: 0;
}

.ref-check {
  display: flex !important;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.75em;
}

.ref-check input {
  width: auto !important;
  margin: 0 !important;
}

.ref-var-picker table {
  width: 100%;
}

.ref-var-picker select,
.ref-var-picker input {
  max-width: 100%;
}

/* CAT-PR2: plant_kind-aware crop / variety trait form */
.ref-trait-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin: 0 0 var(--space-3, 0.75rem);
}

.ref-trait-toolbar .ref-check {
  margin-top: 0;
}

.ref-trait-form .ref-trait-panel {
  margin-bottom: var(--space-3, 0.75rem);
}

.ref-trait-form .ref-field {
  margin-bottom: var(--space-2, 0.5rem);
}

.ref-trait-form .ref-field.is-emphasize > label {
  font-weight: 600;
  color: var(--brand-olive, #456311);
}

.ref-trait-form .ref-field.is-deemphasize {
  opacity: 0.85;
}

.ref-trait-form .ref-field.is-emphasize input,
.ref-trait-form .ref-field.is-emphasize select,
.ref-trait-form .ref-field.is-emphasize textarea {
  border-color: var(--brand-olive-soft, #6b8f3c);
}

.ref-from-crop {
  margin: 0.15em 0 0.35em;
  font-size: 0.88em;
  color: var(--brand-olive-soft, #6b8f3c);
  font-style: italic;
}

.ref-density-inferred {
  margin: 0.15em 0 0.35em;
  font-size: 0.88em;
}

.ref-plant-kind-badge {
  margin: 0 0 0.65em;
}

/* Notes browser (moved from inline) */
.notes-check-page label {
  display: block;
  margin-top: 0.55em;
  font-size: var(--form-label-size);
  color: var(--form-label-color);
  font-weight: 500;
}

.notes-check-page input[type='search'],
.notes-check-page input[type='date'],
.notes-check-page select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.2em 0 0.4em;
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  background: var(--surface-input-bg);
  color: var(--text-color);
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  font: inherit;
}

.notes-check-page input:focus,
.notes-check-page select:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}

.notes-check-filters select {
  min-height: 7em;
}

.notes-check-actions {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.notes-check-list {
  overflow: auto;
  max-height: calc(100vh - 180px);
}

/* List rows: not primary olive fills — quiet selectable cards */
.notes-check-list button {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--surface-panel-border-soft) !important;
  background: var(--surface-input-bg) !important;
  color: var(--text-color) !important;
  margin: 0 0 0.35em;
  padding: 0.5em 0.55em;
  cursor: pointer;
  border-radius: var(--surface-input-radius);
  font-size: 0.9em;
  font-weight: 500;
}

.notes-check-list button:hover {
  background: var(--btn-quiet-hover-bg) !important;
  border-color: var(--brand-olive-soft) !important;
  outline: none;
}

.notes-check-list button.active {
  background: #e8f0dc !important;
  border-color: var(--brand-olive) !important;
  box-shadow: inset 3px 0 0 var(--brand-olive);
  font-weight: 600;
}

.notes-check-list .nc-meta {
  font-size: 0.85em;
  color: var(--surface-text-muted);
}

.notes-check-list .nc-attach {
  display: inline-block;
  margin-left: 0.35em;
  padding: 0.05em 0.35em;
  border-radius: 3px;
  background: var(--brand-danger);
  color: #fff;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: middle;
}

.notes-check-detail {
  overflow: auto;
  max-height: calc(100vh - 160px);
  background: var(--surface-input-bg);
  color: var(--text-color);
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  padding: 0.75em 1em;
}

.notes-check-detail .nc-block {
  margin-bottom: 0.75em;
  line-height: 1.35;
}

.notes-check-detail .nc-block a {
  color: var(--brand-olive);
  font-weight: 600;
  text-decoration: underline;
}

.notes-check-detail .nc-block a:hover {
  color: var(--brand-danger);
}

.notes-check-detail .nc-comment {
  white-space: pre-wrap;
  margin: 0.35em 0 0;
  padding: 0.5em 0.6em;
  background: var(--surface-panel-bg-soft);
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-input-radius);
  color: var(--text-color);
}

.notes-check-detail .nc-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin-top: 0.5em;
}

.notes-check-detail .nc-files a {
  display: inline-block;
  max-width: 100%;
}

.notes-check-detail .nc-files img {
  max-width: 240px;
  max-height: 200px;
  object-fit: contain;
  border: 2px solid var(--brand-olive);
  border-radius: var(--surface-input-radius);
  background: #e8e8e8;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.notes-check-detail .nc-file-link {
  font-size: 0.95em;
  padding: 0.35em 0.6em;
  background: var(--surface-msg-bg);
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-input-radius);
  color: var(--brand-olive);
}

.notes-check-page .ref-hint {
  font-size: 0.8em;
  color: var(--surface-text-muted);
  opacity: 1;
}

/* Planting form density (layout legacy-safe; focus/chrome only) */
.planting-form input[type='text'],
.planting-form input[type='number'],
.planting-form input[type='date'],
.planting-form select,
.planting-form textarea {
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
  padding: 0.3em 0.45em;
  box-sizing: border-box;
}

.planting-form input:focus,
.planting-form select:focus,
.planting-form textarea:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}

table.var_card,
tr.var_card,
td.var_card {
  border-collapse: collapse;
  border: 1px solid var(--secondary-color);
  margin: 1px;
  font-size: 14px;
  text-align: left;
}

/* --- Layout shell (CSS grid: header / navbar / main / footer) --- */

.grid_header {
  width: 100%;
  max-width: 100%;
  grid-area: header;
  /* Minimal chrome: almost no space under the banner */
  padding: 2px 0.5rem 0;
  text-align: center;
  background: var(--primary-color);
  color: white;
  box-sizing: border-box;
  overflow: hidden;
  line-height: 0;
}

/* Banner only (no title text / tagline); links to field top view */
.grid_header h1.app-title-heading {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
  font-weight: normal;
}
.grid_header h1 a.app-title {
  display: inline-block;
  /* 20% smaller than prior 42rem / 6.375rem */
  max-width: min(33.6rem, 96vw);
  line-height: 0;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.grid_header h1 a.app-title .app-title-banner {
  display: block;
  width: 100%;
  max-width: min(33.6rem, 96vw);
  height: auto;
  max-height: 5.1rem;
  object-fit: contain;
  object-position: center bottom;
  margin: 0 auto;
  padding: 0;
  vertical-align: bottom;
}
.grid_header h1 a.app-title,
.grid_header h1 a.app-title:link,
.grid_header h1 a.app-title:visited,
.grid_header h1 a.app-title:hover,
.grid_header h1 a.app-title:active {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.grid_navbar {
  width: 100%;
  max-width: 100%;
  grid-area: navbar;
  /* Auto height so pure-observer create-garden banner can sit under the menu */
  height: auto;
  min-height: 50px;
  max-height: none;
  overflow: visible; /* dropdowns must paint over main content */
  background: var(--brand-olive);
  color: white;
  padding: 0;
  position: relative;
  z-index: var(--z-dropdown); /* above main grid */
  box-sizing: border-box;
}
.grid_navbar > .my_navbar {
  height: 50px;
  max-height: 50px;
}

/* Pure observer: offer self-serve garden/farm under the top menu */
.observer-create-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65em 1em;
  padding: 0.55em 0.9em;
  background: linear-gradient(180deg, #f4f8ec 0%, #e8f0d8 100%);
  color: #2f3f28;
  border-bottom: 1px solid rgba(90, 120, 50, 0.28);
  box-sizing: border-box;
}
.observer-create-banner-text {
  margin: 0;
  flex: 1 1 14rem;
  font-size: 0.92rem;
  line-height: 1.4;
  font-weight: 500;
}
.observer-create-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0.5em 1.1em;
  border-radius: 6px;
  background: var(--btn-primary-bg);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid rgba(50, 80, 30, 0.25);
}
.observer-create-banner-cta:hover {
  background: var(--btn-primary-hover);
}

/* Main content shells fill the outer grid row; panes scroll on desktop side-by-side */
.grid_main_1c,
.grid_main_2c_11,
.grid_main_2c_12,
.grid_main_2c_21,
.grid_main_3c {
  grid-area: grid_main;
  display: grid;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  gap: 0;
  padding: 0;
  background-color: var(--background-light);
  box-sizing: border-box;
  overflow: hidden; /* desktop: children scroll independently */
  position: relative;
  z-index: 1; /* keep below navbar dropdowns */
}

.grid_main_1c {
  grid-template-areas: 'main';
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
}
/* Single-column pages (onboarding, wizards): scroll inside main, never over footer */
.grid_main_1c > .grid_main {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.grid_main_2c_11 {
  grid-template-areas: 'main2l main2r';
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.grid_main_2c_12 {
  grid-template-areas: 'main2l main2r';
  grid-template-columns: 1fr 2fr;
  grid-template-rows: minmax(0, 1fr);
}

/* Map-primary two-column (zone manager): wide map left, form right */
.grid_main_2c_21 {
  grid-template-areas: 'main2l main2r';
  grid-template-columns: 2fr 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.grid_main_3c {
  grid-template-areas: 'mainl mainc mainr';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: minmax(0, 1fr);
}

.grid_main,
.grid_mainl,
.grid_mainc,
.grid_mainr,
.grid_main2l,
.grid_main2r {
  margin: 5px;
  padding: 5px;
  min-width: 0; /* allow flex/grid children to shrink within viewport */
  min-height: 0;
  overflow: auto; /* side-by-side: scroll inside pane */
  box-sizing: border-box;
  background-color: var(--background-light);
}

/* Form tables use full pane width; long selects stay inside */
.grid_mainl > table,
.grid_main2l > table,
.grid_main > table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.grid_mainl > table td,
.grid_main2l > table td,
.grid_main > table td {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.grid_mainl > table td:first-child,
.grid_main2l > table td:first-child {
  width: 32%;
}

.grid_mainl > table td:last-child,
.grid_main2l > table td:last-child {
  width: 68%;
}

/* Wide data tables: scroll horizontally inside their container */
/* Multi-planting chips under harvest planting picker */
.harvest-planting-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
  max-width: 100%;
}

.harvest-planting-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  padding: 0.2rem 0.35rem 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-msg-bg);
  border: 1px solid var(--surface-panel-border-soft);
  color: var(--surface-title);
  font-size: 0.85rem;
  line-height: 1.2;
}

.harvest-planting-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

/* Chip dismiss — quiet mini-control (not primary form action) */
button.harvest-planting-chip-remove,
.harvest-planting-chip-remove {
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
  padding: 0;
  border: none !important;
  border-radius: 50%;
  background: var(--brand-olive-soft) !important;
  color: #fff !important;
  font-size: 1rem;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
}

button.harvest-planting-chip-remove:hover,
button.harvest-planting-chip-remove:focus,
.harvest-planting-chip-remove:hover,
.harvest-planting-chip-remove:focus {
  background: var(--brand-olive) !important;
  outline: none;
}

#harvest_list,
#harvest_stats,
#harvest_stats_last,
#harvest_rev_weekly12,
.ref-list,
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

#harvest_list table,
#harvest_stats table,
#harvest_stats_last table,
#harvest_rev_weekly12 table,
.ref-list table,
.table-scroll table {
  width: auto;
  min-width: 100%;
  max-width: none;
  table-layout: auto;
  border-collapse: collapse;
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
  overflow: hidden;
}

#harvest_list th,
#harvest_stats th,
#harvest_stats_last th,
#harvest_rev_weekly12 th,
.ref-list th,
.table-scroll th {
  background: var(--surface-table-head);
  color: var(--text-color);
  font-weight: 700;
  text-align: left;
  padding: 0.4em 0.65em;
  border-bottom: 1px solid var(--surface-panel-border);
}

#harvest_list td,
#harvest_stats td,
#harvest_stats_last td,
#harvest_rev_weekly12 td,
.ref-list td,
.table-scroll td {
  padding: 0.35em 0.65em;
  border-bottom: 1px solid var(--surface-divider);
  vertical-align: middle;
}

#harvest_list tr:nth-child(even) td,
#harvest_stats tr:nth-child(even) td,
#harvest_stats_last tr:nth-child(even) td,
#harvest_rev_weekly12 tr:nth-child(even) td,
.ref-list tr:nth-child(even) td,
.table-scroll tr:nth-child(even) td {
  background: var(--surface-table-alt);
}

#harvest_list tr:hover td,
#harvest_stats tr:hover td,
#harvest_stats_last tr:hover td,
#harvest_rev_weekly12 tr:hover td,
.ref-list tr:hover td,
.table-scroll tr:hover td {
  background: var(--surface-table-hover);
}

.grid_main {
  grid-area: main;
}

.grid_mainl {
  grid-area: mainl;
}

.grid_mainc {
  grid-area: mainc;
}

.grid_mainr {
  grid-area: mainr;
}

.grid_main2l {
  grid-area: main2l;
}

.grid_main2r {
  grid-area: main2r;
}

/* --- Footer --- */
.grid_footer {
  grid-area: footer;
  background: var(--primary-color);
  color: white;
  min-height: 0;
}

.grid_footer .footer-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75em 1.25em;
  margin: 0;
  padding: 0.4em 0.85em;
  font-size: 0.82em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

.grid_footer .footer-copy {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid_footer .footer-legal {
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}

.grid_outer {
  display: grid;
  width: 100%;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  grid-template-areas:
    'header'
    'navbar'
    'grid_main'
    'footer';
  grid-template-columns: minmax(0, 1fr);
  /* Navbar row is auto so observer create-garden banner can sit under the menu */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 0;
  padding: 0;
  background-color: var(--background-light);
  /* Do not clip navbar dropdowns (overflow-x:hidden creates a clip edge) */
  overflow: visible;
}

.grid-container>div {
  font-size: 20px;
}

/* --- Navbar (single-line + JS priority overflow into More) --- */

.my_navbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  height: 50px;
  max-height: 50px;
  background-color: var(--brand-olive);
  overflow: visible; /* critical: do not clip dropdown panels */
  box-sizing: border-box;
  position: relative;
  z-index: var(--z-dropdown);
}

.nav-primary {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  /* overflow:hidden would clip dropdowns — JS hides overflow items instead */
  overflow: visible;
}

.nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  box-sizing: border-box;
}

.nav-item-overflow {
  display: none !important;
}

.my_navbar > .nav-primary > a.nav-item,
.my_navbar a.nav-item {
  color: #f2f2f2;
  text-align: center;
  padding: 0 14px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  font-size: 16px;
}

.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.dropbtn {
  display: inline-flex;
  align-items: center;
  text-align: left;
  background-color: var(--brand-olive);
  color: white;
  padding: 0 14px;
  height: 50px;
  font-size: 16px;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-weight: 600;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

.nav-more {
  flex: 0 0 auto;
  margin-left: auto;
  position: relative;
  z-index: calc(var(--z-dropdown) + 1);
}

/* --- Shop / catalog admin shell (subnav + nested grid pages) --- */
/*
 * Owns outer grid_main so secondary bar + page content stay together under the
 * top navbar (orphaned subnav would auto-place after footer).
 */
.shop-admin-shell {
  grid-area: grid_main;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  /* Hub (settings form) may be taller than the viewport; nested 2-col pages fill remainder */
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: var(--background-light);
  position: relative;
  z-index: 1;
}

/* Secondary bar inside shell — not a second top chrome row */
.admin-subnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.15rem;
  padding: 0.4rem 0.65rem;
  margin: 0;
  flex: 0 0 auto;
  background: var(--btn-quiet-hover-bg);
  border-bottom: 1px solid var(--surface-panel-border-soft);
  box-sizing: border-box;
  width: 100%;
  z-index: 5;
}
.admin-subnav a {
  display: inline-block;
  padding: 0.3rem 0.65rem;
  border-radius: var(--surface-input-radius);
  color: var(--surface-title);
  text-decoration: none;
  font-size: 0.92rem;
  white-space: nowrap;
}
.admin-subnav a:hover {
  background: var(--surface-table-hover);
  color: #1e3212;
}
.admin-subnav a.is-active {
  background: var(--brand-olive);
  color: #fff;
  font-weight: 600;
}
.admin-subnav a.is-active:hover {
  background: var(--brand-olive-hover);
  color: #fff;
}

/* Nested main grids must not claim outer grid_main (parent is the shell) */
.shop-admin-shell > .grid_main_1c,
.shop-admin-shell > .grid_main_2c_11,
.shop-admin-shell > .grid_main_2c_12,
.shop-admin-shell > .grid_main_3c {
  grid-area: auto;
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  width: 100%;
}
/* Titles / messages above nested grids stay compact */
.shop-admin-shell > h2,
.shop-admin-shell > h3,
.shop-admin-shell > p,
.shop-admin-shell > form,
.shop-admin-shell > .shop-hub,
.shop-admin-shell > .catalog-hub {
  flex: 0 0 auto;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

/* Catalog / shop hub cards — full-card hit target (touch + mouse); earth-sage chrome */
.shop-hub,
.catalog-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.5rem;
}

.shop-hub-card,
a.shop-hub-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  padding: 0.85rem 0.9rem;
  min-height: 4.75rem;
  box-sizing: border-box;
  background: var(--surface-input-bg);
  box-shadow: var(--shadow-sm);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

a.shop-hub-card-link {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  cursor: pointer;
}

a.shop-hub-card-link:hover {
  border-color: var(--brand-olive-soft);
  background: var(--surface-panel-bg-soft);
  box-shadow: var(--shadow-md);
}

a.shop-hub-card-link:focus {
  outline: none; /* keyboard uses :focus-visible */
}

a.shop-hub-card-link:focus-visible {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 2px;
  border-color: var(--brand-olive-soft);
  background: var(--surface-panel-bg-soft);
  box-shadow: var(--shadow-md);
}

a.shop-hub-card-link:active {
  background: #e8f0df;
  box-shadow: 0 1px 2px rgba(60, 80, 40, 0.08);
}

.shop-hub-card-disabled {
  display: block;
  border: 1px solid var(--surface-divider);
  border-radius: var(--surface-panel-radius);
  padding: 0.85rem 0.9rem;
  min-height: 4.75rem;
  box-sizing: border-box;
  opacity: 0.72;
  background: var(--surface-panel-bg);
  box-shadow: none;
  cursor: not-allowed;
}

.shop-hub-card-title {
  display: block;
  color: var(--brand-olive);
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.3;
}

a.shop-hub-card-link .shop-hub-card-title {
  text-decoration: none;
}

a.shop-hub-card-link:hover .shop-hub-card-title,
a.shop-hub-card-link:focus .shop-hub-card-title {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.shop-hub-card-hint {
  display: block;
  font-size: 0.9em;
  margin-top: 0.4rem;
  color: var(--surface-text-muted);
  text-decoration: none;
  font-weight: normal;
  line-height: 1.35;
}

/* Listbox selects in catalog (size>1): easier tap on mobile */
#ref_select,
#hi_item_list,
.ref-picker select[size],
select.ref-listbox {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  font-size: 16px; /* avoid iOS focus zoom */
}

/* Catalog child pages: back to hub (same on all catalog screens) */
.catalog-back,
.ref-back {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.95em;
}
.catalog-back a,
.ref-back a {
  color: var(--brand-olive);
  text-decoration: none;
  font-weight: 600;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  padding: 0.2em 0;
}
.catalog-back a:hover,
.ref-back a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
  color: var(--brand-olive-hover);
}
.shop-admin-shell > h2:first-of-type {
  margin-top: 0.75rem;
  color: var(--surface-title);
}
.shop-admin-shell > h2,
.shop-admin-shell > h3,
.catalog-hub + h2,
.grid_main_1c > h2 {
  color: var(--surface-title);
}

.nav-more[hidden] {
  display: none !important;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f1f1f1;
  min-width: 200px;
  max-width: min(92vw, 320px);
  /* overflow must stay visible so nested Language flyouts are not clipped */
  overflow: visible;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
  z-index: var(--z-dropdown-more);
}

.dropdown-content-right {
  left: auto;
  right: 0;
}

.dropdown-content a,
.dropdown-content .submenu-btn {
  float: none;
  color: #202020;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
  text-align: left;
  line-height: 1.3;
  white-space: normal;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}

/* Nested Language submenu */
.nav-submenu {
  position: relative;
  border-top: 1px solid #ddd;
}

.submenu-btn {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

.submenu-btn::after {
  content: '▸';
  margin-left: 0.5em;
  opacity: 0.7;
}

.submenu-content {
  display: none;
  position: absolute;
  /* Default flyout to the left (Admin near right edge); JS may flip */
  left: auto;
  right: 100%;
  top: 0;
  min-width: 140px;
  background: #f8f8f8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  z-index: var(--z-popover);
}

/* Pot season series lists can be long */
.submenu-content.pot-season-series {
  min-width: 11em;
  max-height: 70vh;
  overflow-y: auto;
}

/* --- Pot middle-pane panels (series status + tray pattern) --- */
/*
 * Shared pot middle-pane panels (series status + tray pattern trial).
 * ROLLBACK pattern panel: remove .pot-pattern-panel usage in PlantingForm;
 * series status can keep .pot-track-panel alone.
 */
.pot-panel,
.pot-track-panel {
  margin: 0 0 1em 0;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  background: var(--surface-panel-bg);
  box-sizing: border-box;
}

.pot-panel-title,
.pot-track-summary {
  padding: 0.5em 0.75em;
  font-weight: 600;
  color: var(--surface-title);
  user-select: none;
}

.pot-track-summary {
  cursor: pointer;
  list-style-position: outside;
}

.pot-panel-title {
  border-bottom: 1px solid var(--surface-panel-border);
}

.pot-track-summary:hover {
  background: var(--btn-quiet-hover-bg);
}

.pot-panel-body,
.pot-track-body {
  padding: 0.55em 0.75em 0.8em;
}

/* Field tools: one-line title + action (new zone) */
.field-add-zone-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
}
.field-add-zone-panel .pot-panel-title {
  border-bottom: none;
  padding: 0.4em 0.75em;
  flex: 1 1 auto;
  min-width: 0;
}
.field-add-zone-panel .pot-panel-body {
  padding: 0.3em 0.75em 0.3em 0;
  flex: 0 1 auto;
}

.pot-track-body {
  border-top: 1px solid var(--surface-panel-border);
}

.pot-track-body .pot-track-tray {
  margin-bottom: 0.5em;
}

.pot-pattern-panel .pot-panel-body table {
  margin-bottom: 0.35em;
}

/* --- Field left pane: active plantings list --- */
.field-active-plantings {
  margin-top: 0.75em;
}

.field-active-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.85em;
}

.field-active-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5em;
  padding: 0.3em 0;
  border-bottom: 1px solid var(--surface-divider);
}

.field-active-item:last-child {
  border-bottom: none;
}

.field-active-item a {
  color: #2a3a22;
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  word-break: break-word;
  line-height: 1.35;
}

.field-active-item a:hover {
  color: #2a5a1a;
  text-decoration: underline;
}

.field-active-id {
  font-size: 0.8em;
  opacity: 0.65;
  flex-shrink: 0;
}

.field-active-empty {
  margin: 0.25em 0;
}

.field-active-zoom-hint {
  margin: 0 0 0.65em;
  line-height: 1.4;
}

.field-active-truncated {
  margin: 0.55em 0 0;
  font-style: italic;
}

.nav-menu-empty {
  display: block;
  padding: 0.5em 1em;
  color: #888;
  font-style: italic;
  white-space: nowrap;
}

.dropdown-content a.nav-logout {
  border-top: 1px solid #ddd;
  margin-top: 0.15em;
  color: #8a3020;
  font-weight: 600;
}

.dropdown-content a.nav-logout:hover {
  background: #f8ebe8;
  color: #6a2015;
}

/* Left-aligned dropdowns (e.g. Data): prefer flyout to the right unless JS flips */
.dropdown-content:not(.dropdown-content-right) .nav-submenu:not(.submenu-open-left) > .submenu-content {
  left: 100%;
  right: auto;
}

/* Highest priority: JS viewport-aware side (must win over parent defaults) */
.nav-submenu.submenu-open-right > .submenu-content {
  left: 100% !important;
  right: auto !important;
}

.nav-submenu.submenu-open-left > .submenu-content {
  left: auto !important;
  right: 100% !important;
}

.submenu-content a.active-lang {
  font-weight: bold;
  background: #e8f0dc;
}

/* Hover (desktop) and .open (touch / click) */
.nav-dropdown:hover > .dropdown-content,
.nav-dropdown.open > .dropdown-content {
  display: block;
}

.nav-submenu:hover > .submenu-content,
.nav-submenu.open > .submenu-content {
  display: block;
}

.my_navbar a.nav-item:hover,
.nav-dropdown:hover > .dropbtn,
.nav-dropdown.open > .dropbtn {
  background-color: var(--secondary-color);
  color: white;
}

.dropdown-content a:hover,
.dropdown-content .submenu-btn:hover,
.submenu-content a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: var(--secondary-color);
  color: white;
  margin: 0;
}

/* Legacy class aliases */
.dropdown,
.dropdown-right {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.my_navbar .icon {
  display: none;
}

/* Nested submenu stacks under parent on narrow screens (no off-screen flyout) */
@media screen and (max-width: 800px) {
  .submenu-content {
    position: static;
    box-shadow: none;
    border-left: 3px solid #9bb073;
    background: #f0f0f0;
  }

  .submenu-btn::after {
    content: '▾';
  }
}


/* --- Responsive layout (≤800px stacks columns; document scrolls) --- */

/*
 * Mobile: page grows with content (browser scrolls the document).
 * Multi-column layouts stack full-height: column1 above column2 above column3.
 * Form controls fit the viewport width; wide data tables scroll horizontally.
 */
@media screen and (max-width: 800px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden; /* page itself does not shift sideways */
    overflow-y: auto;
  }

  .grid_outer {
    height: auto;
    min-height: 100dvh;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    overflow: visible;
  }

  .grid_main_1c,
  .grid_main_2c_11,
  .grid_main_2c_12,
  .grid_main_2c_21,
  .grid_main_3c {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: visible;
  }

  .grid_main,
  .grid_mainl,
  .grid_mainc,
  .grid_mainr,
  .grid_main2l,
  .grid_main2r {
    position: relative;
    display: block;
    /* margin lives inside width so fields are not cropped on the right */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px;
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    overflow-x: auto; /* wide tables scroll here if needed */
    overflow-y: visible;
    box-sizing: border-box;
  }

  /* Form tables + controls fill the pane without overflowing */
  .grid_mainl > table,
  .grid_main2l > table,
  .grid_main > form table,
  #add_harvest_form {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }

  .grid_mainl input,
  .grid_mainl select,
  .grid_mainl textarea,
  .grid_main2l input,
  .grid_main2l select,
  .grid_main2l textarea,
  .grid_main2r input,
  .grid_main2r select,
  .grid_main2r textarea,
  .zone-manager-form input,
  .zone-manager-form select,
  .zone-manager-form textarea,
  .grid_main input,
  .grid_main select,
  .grid_main textarea,
  #add_harvest_form input,
  #add_harvest_form select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
  }

  .grid_navbar,
  .my_navbar {
    height: 50px;
    max-height: 50px;
  }

  .my_navbar > .nav-primary > a.nav-item,
  .my_navbar a.nav-item,
  .dropbtn {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 15px;
  }
}


/* --- Form controls (inputs, selects, submits) --- */

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Match production croppit.css input styling (field forms rely on this). */
input[type=number],
input[type=text],
input[type=date],
input[type=email],
input[type=password],
input[type=tel],
input[type=search],
textarea,
select,
input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 1px;
  margin: 1px 0; /* no horizontal margin — avoids width:100% + margin overflow */
  display: inline-block;
  border: 1px solid #aa1100;
  border-radius: 2px;
  box-sizing: border-box;
  font-size: 16px;
}

td > input[type=number],
td > input[type=text],
td > input[type=date],
td > input[type=email],
td > input[type=password],
td > input[type=tel],
td > input[type=search],
td > select,
td > textarea,
td > input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 1px 0;
  display: inline-block;
  box-sizing: border-box;
}

/* Range sliders (num_rows etc.) — keep usable slider chrome, not a bordered text box */
input[type=range],
td > input[type=range] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 28px;
  margin: 4px 0;
  padding: 0;
  display: block;
  border: none;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  vertical-align: middle;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Date fields must keep calendar picker (type=date); do not restyle as plain text */
input[type=date],
td > input[type=date] {
  min-height: 1.8em;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Checkboxes / radios must not stretch full width */
input[type=checkbox],
input[type=radio] {
  width: auto;
  max-width: none;
  display: inline-block;
  margin: 0 4px 0 0;
}

/* submit / .button share global primary tokens (see Buttons section above) */
input[type=submit],
.button {
  width: auto;
  margin: 0;
  display: inline-block;
}

/* Planting form: intermediate action strips stay right-aligned like production */
.planting-form input[type=submit].planting_add,
.planting-form input[type=submit].planting_update,
.planting-form input[type=submit].planting_delete {
  width: auto;
  display: inline-block;
  margin-left: 4px;
}

.pot-hint {
  font-size: 14px;
  opacity: 0.85;
  margin: 0 0 10px 0;
}

/* Field row pattern: tiny ↺ next to inter/intra → catalog variety/crop default */
#pattern_params button.spacing-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  min-width: 0;
  padding: 0;
  margin: 0 0 0 0.25em;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: middle;
  border-radius: 4px;
  cursor: pointer;
}
#pattern_params button.spacing-reset-btn:focus-visible {
  outline: 2px solid var(--btn-tool-bg, #2c3e50);
  outline-offset: 1px;
}

/* --- Field map / bed SVG --- */
/*
 * Zone map: DO NOT style nested <a>/<svg> layout (display/position) inside the
 * recursive map. Production relies on default SVG/HTML layout; display:block on
 * anchors breaks nested child positioning (scale outer_x/outer_y).
 *
 * Touch interaction styles below are allowed (tap highlight / callout only).
 */

/* Field culture map + zone-manager Browse: one-tap zone select/zoom, no OS steal */
.culture-zone-map,
.culture-zone-map svg,
.culture-zone-map a,
.zone-draw-shell.mode-browse .zone-draw-host,
.zone-draw-shell.mode-browse .zone-draw-host svg,
.zone-draw-shell.mode-browse .zone-draw-host a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.culture-zone-map a,
.zone-draw-shell.mode-browse .zone-draw-host a {
  /* Avoid double-tap zoom delay; do not use pan-y here (would fight link activation) */
  touch-action: manipulation;
  cursor: pointer;
}

/* Field bed SVG only (production draw_planting.php inline styles) */
svg.bed {
  margin-top: 15px;
  margin-bottom: 15px;
  margin-left: 10px;
  margin-right: 10px;
  outline: 10px solid goldenrod;
  background: #663300;
  z-index: 0;
  overflow: auto;
}

#bed_date {
  width: 100%;
  max-width: 100%;
}

/* Field Presentation modes shell (colour + history + future tools) */
.field-presentation {
  margin: 0 0 0.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  background: var(--surface-panel-bg);
  font-size: 0.9em;
  box-sizing: border-box;
}
.field-presentation-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}
.field-presentation-label {
  font-weight: 600;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.field-presentation-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 2rem;
  padding: 0.3em 0.75em;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88em;
  line-height: 1.2;
  white-space: nowrap;
}
.field-presentation-body {
  margin-top: 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.field-presentation-section {
  padding: 0.4rem 0.45rem 0.45rem;
  border: 1px solid var(--surface-panel-border, rgba(0, 0, 0, 0.08));
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  box-sizing: border-box;
}
.field-presentation-section-title {
  font-weight: 600;
  font-size: 0.95em;
  display: block;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.field-pres-sec-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.3rem;
}
.field-pres-sec-toggle {
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 2rem;
  padding: 0.3em 0.75em;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88em;
  line-height: 1.2;
  white-space: nowrap;
}
.field-asof-summary {
  margin: 0 0 0.15rem;
  font-size: 0.92em;
  color: var(--text-muted, #555);
  font-weight: 500;
}

/* Field as-of date control (ZH6 / N0g) — lives inside Presentation modes */
.field-asof {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: inherit;
  box-sizing: border-box;
}
.field-asof-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.25rem;
}
.field-asof-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.field-asof-label {
  font-weight: 500;
  white-space: nowrap;
}
.field-asof-date {
  max-width: 11rem;
  min-height: 2rem;
}
.field-asof-output {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.field-asof-badge {
  display: inline-block;
  padding: 0.15em 0.45em;
  border-radius: 4px;
  background: #e8d5a8;
  color: #4a3a12;
  font-size: 0.85em;
  font-weight: 600;
}
.field-asof--history .field-asof-output {
  color: #6b4e12;
}
.field-asof-slider {
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
}
.field-asof-hint {
  margin: 0.25rem 0 0;
}

/* Field map zone colour heuristics (N0e) — subsection inside Presentation modes */
.field-zone-color {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: inherit;
  box-sizing: border-box;
}
.field-zone-color-bar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}
.field-zone-color-label {
  font-weight: 600;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
.field-zone-color-toggle {
  /* colours: global tool role (.field-zone-color-toggle in Buttons section) */
  flex: 0 0 auto;
  margin-left: auto;
  min-height: 2rem;
  padding: 0.3em 0.75em;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.88em;
  line-height: 1.2;
  white-space: nowrap;
}
/* Heuristic dropdown on its own line under the title bar */
.field-zone-color-mode {
  margin-top: 0.35rem;
}
.field-zone-color-select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.field-zone-color-panel {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--surface-divider);
}
.field-zone-color-hint {
  margin: 0 0 0.45rem;
  color: #555;
  font-size: 0.9em;
}
.field-zone-color-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.3rem 0;
}
.field-zone-color-row label {
  flex: 0 0 6.5rem;
  font-weight: 500;
}
.field-zone-color-row select,
.field-zone-color-row input.field-zone-color-number {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 100%;
  box-sizing: border-box;
}
.field-zone-color-row input.field-zone-color-number {
  max-width: 8rem;
}
.field-zone-color-legend {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.field-zone-color-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.25;
}
.field-zone-color-swatch {
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  border: 1px solid #666;
  border-radius: 2px;
  display: inline-block;
}
.field-zone-color-swatch--note {
  background: linear-gradient(135deg, #ddd 25%, #fff 25%, #fff 50%, #ddd 50%, #ddd 75%, #fff 75%);
  background-size: 8px 8px;
  border-style: dashed;
}

/* Tree / bush group placement map (inline in pattern panel, center column) */
.field-points-map,
.field-points-map-inline {
  margin: 8px 0 12px;
  width: 100%;
  max-width: 100%;
}

/* Fill pattern panel width; height follows zone viewBox aspect (no fixed cap) */
svg.field-points-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  cursor: crosshair;
  user-select: none;
  -webkit-user-select: none;
}

.field-points-map-hint {
  font-size: 0.9em;
  margin: 0.25em 0 0.75em;
}

.field-points-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

button.field-points-tool {
  /* base fill: global tool role; size/padding local */
  border-radius: var(--btn-radius);
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
}

button.field-points-tool.active {
  background: var(--brand-tool-active) !important;
  border-color: var(--brand-tool-active) !important;
  color: var(--btn-tool-fg) !important;
}

.field-points-list {
  margin: 6px 0 0 1.2em;
  padding: 0;
  max-height: 12em;
  overflow: auto;
  font-size: 0.9em;
}

.field-points-list .field-points-empty {
  list-style: none;
  margin-left: -1.2em;
  color: #666;
}

.field-tree-params-title {
  margin: 1em 0 0.4em;
  font-size: 1.05em;
}

.field-tree-params td {
  vertical-align: top;
  padding: 0.2em 0;
}

.field-tree-params .zone-color-picker {
  max-width: 100%;
}

.field-tree-sep {
  border: none;
  border-top: 1px solid #ccc;
  margin: 0.5em 0;
}

/* Tree SVG on points map */
.planting-trees .tree-crown {
  pointer-events: all;
}
.planting-overview-markers {
  pointer-events: all;
}

a.button {
  display: inline-block;
  width: auto;
  text-decoration: none;
  /* colours/padding from global primary button block */
}

/* Form tables in center column (pot edit) use full pane width */
.grid_mainc > form table,
.grid_mainc form.planting-form table,
.planting-form table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.planting-form table td {
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* hover for submit/.button covered by global button:hover */

/* --- Option tile grid (legacy picker tiles) --- */

#select {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  width: 100%;
  outline: 2px;
  /*background-color: red;*/
}

#select a {
  text-decoration: none;
  display: block;
  width: 100%;
}

p.options {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 20px;
  border-color: grey;
  border-style: solid;
  border-width: 5px;
  background-color: var(--background-light);
  background-position: center center;
  opacity: 0.9;
  height: 100px;
  width: 100px;
  margin: 2px;
  font-family: var(--font-family);
  color: var(--text-color);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

p.options:hover {
  background-color: silver !important;
  color: var(--secondary-color) !important;
}


/* --- Styled data tables --- */

.styled {
  width: auto;
  border-collapse: collapse;
  font-family: var(--font-family);
  font-size: 16px;
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-input-radius);
  overflow: hidden;
}

.styled th {
  background-color: var(--surface-table-head);
  color: var(--text-color);
  text-align: left;
  font-weight: 700;
  padding: 0.35em 0.65em 0.35em 0.4em;
  border-bottom: 1px solid var(--surface-panel-border);
}

.styled td {
  width: auto;
  text-align: left;
  padding: 0.3em 0.65em 0.3em 0.4em;
}

.styled tr {
  background-color: var(--surface-table-row);
}

.styled tr:nth-child(even) {
  background-color: var(--surface-table-alt);
}

.styled tr:hover {
  background-color: var(--surface-table-hover) !important;
}


/* --- Variety flip cards (catalog) --- */

.var-card-title {
  display: inline-block;
  margin: 0 0 0.25em;
  font-weight: 600;
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
  position: relative;
  /* Prefer vertical pan of back content; JS owns horizontal unflip on touch */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.flip-box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/*
 * Mouse/desktop only: legacy CSS :hover flip.
 * Touch uses .is-flipped (assets/js/flip_card.js) so scrolling the back
 * does not unflip unless the swipe is decisively horizontal (±15°).
 */
@media (hover: hover) and (pointer: fine) {
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
}

.flip-box.is-flipped .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  background-color: var(--background-light);
  color: black;
  border: 2px solid #aa1100;
  border-radius: 10px;
}

.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: var(--background-light);
  color: var(--text-color);
  transform: rotateY(180deg);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 15px 15px;
  border: 2px solid #aa1100;
  border-radius: 10px;
}

.flip-box-back .var-card-edit {
  margin: 0 0 0.5em;
  font-weight: 600;
}

.flip-box-back .var-card-edit a {
  color: #2a5a1a;
  text-decoration: underline;
}

/* CAT-PR5: resolved plant traits on flip-card back */
.flip-box-back .var-card-section-title,
.flip-box-back .var-cal-title {
  margin: 0.45em 0 0.3em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--brand-olive, #456311);
}

.flip-box-back .var-card-traits,
.flip-box-back .var-card-other {
  margin: 0.35em 0 0.5em;
  text-align: left;
}

.flip-box-back .var-card-from-crop,
.flip-box-back .var-card-inferred {
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  opacity: 0.75;
  color: var(--form-label-color, #445);
}

.flip-box-back .var-card-prose {
  margin: 0 0 0.45em;
  font-size: 0.9em;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.flip-box-back .var-card-sold-by {
  margin: 0.35em 0;
  font-size: 0.9em;
  text-align: left;
}

.flip-box-back .var-card-sold-by-label {
  font-weight: 600;
  margin: 0 0 0.15em;
}

.flip-box-back .var-card-sold-by-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flip-box-back .var-card-sold-by-list li {
  margin: 0;
  padding: 0.05em 0;
  line-height: 1.35;
}

.flip-box-back .var-card-sold-by a.var-card-offer-link {
  color: var(--brand-olive, #456311);
  text-decoration: underline;
}

.flip-box-back .var-card-sold-by a.var-card-offer-link:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: 2px;
}

.flip-box-back .var-card-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1, 4px);
  margin: 0.4em 0 0.2em;
}

.flip-box-back .var-card-gallery-img {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--form-border, #ccc);
}

#var_picker #planting_plant_co,
#var_picker #offer_ref {
  min-height: var(--touch-min, 44px);
  max-width: 100%;
}

#var_picker #offer_ref {
  margin-top: var(--space-1, 4px);
}

/* Variety card culture calendar (CT11): 12 months × 4 week-slots */
.flip-box-back .var-cal-block {
  margin: 0.45em 0 0.65em;
  text-align: left;
}

.flip-box-back .var-cal-title {
  margin: 0 0 0.3em;
}

.var-cal-chart {
  width: 100%;
  font-size: 0.72em;
  line-height: 1.2;
  border: 1px solid var(--surface-panel-border, #d0d7c8);
  border-radius: 6px;
  background: var(--surface-panel-bg, #fafbf7);
  padding: 0.35em 0.4em 0.45em;
  box-sizing: border-box;
}

.var-cal-row {
  display: flex;
  align-items: stretch;
  gap: 0.25em;
  margin: 0.12em 0;
}

.var-cal-label {
  flex: 0 0 4.6em;
  max-width: 4.6em;
  font-size: 0.92em;
  color: var(--form-label-color, #445);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-self: center;
}

.var-cal-head .var-cal-label {
  visibility: hidden;
}

.var-cal-months,
.var-cal-weeks {
  flex: 1 1 auto;
  display: flex;
  min-width: 0;
}

.var-cal-month {
  flex: 1 1 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.9em;
  color: var(--text-color, #202020);
  opacity: 0.85;
}

.var-cal-month-block {
  flex: 1 1 0;
  display: flex;
  gap: 1px;
  min-width: 0;
  padding: 0 0.5px;
}

.var-cal-week {
  flex: 1 1 0;
  height: 0.55em;
  min-width: 2px;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

.var-cal-series.var-cal--pot .var-cal-week.is-on {
  background: #3d8b40; /* green — pot / nursery */
}

.var-cal-series.var-cal--seed .var-cal-week.is-on {
  background: #8b5a2b; /* brown — seed */
}

.var-cal-series.var-cal--plant .var-cal-week.is-on {
  background: #2e7d32; /* plant out/in */
}

.var-cal-series.var-cal--harvest .var-cal-week.is-on {
  background: #c62828; /* red — harvest */
}

.var-cal-series.var-cal--bloom .var-cal-week.is-on {
  background: #8e24aa; /* purple — bloom */
}

/* --- CAT-PR4 catalog calendar editor (scoped; does not alter flip-card) --- */
.ref-field-calendar {
  margin-bottom: 0.85em;
}

.ref-cal-editor {
  border: 1px solid var(--surface-border, rgba(0, 0, 0, 0.12));
  border-radius: 6px;
  padding: 0.5em 0.6em 0.65em;
  background: var(--surface-raised, #faf9f6);
  max-width: 100%;
  overflow-x: auto;
}

.ref-cal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.85em;
  margin-bottom: 0.25em;
}

.ref-cal-title {
  font-weight: 600;
  font-size: 0.95em;
  margin: 0;
}

.ref-cal-hint {
  margin: 0 0 0.4em;
  font-size: 0.85em;
}

.ref-cal-strip {
  margin-top: 0.35em;
}

.ref-cal-y1-wrap.is-collapsed {
  display: none;
}

.ref-cal-row {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0.1em 0;
  min-width: 0;
}

.ref-cal-label {
  flex: 0 0 3.2em;
  font-size: 0.72em;
  opacity: 0.8;
  text-align: right;
}

.ref-cal-months,
.ref-cal-weeks {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

.ref-cal-month {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.7em;
  font-weight: 600;
  opacity: 0.85;
}

.ref-cal-month-block {
  flex: 1 1 0;
  display: flex;
  gap: 1px;
  min-width: 0;
  padding: 0 1px;
}

.ref-cal-week {
  flex: 1 1 0;
  min-width: 0;
  height: 1.15em;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.04);
  cursor: pointer;
  box-sizing: border-box;
}

.ref-cal-week:hover,
.ref-cal-week:focus-visible {
  outline: 2px solid var(--focus-ring, #5a7a3a);
  outline-offset: 1px;
}

.ref-cal-week.is-on {
  background: #2e7d32;
  border-color: transparent;
}

.ref-cal--pot .ref-cal-week.is-on { background: #3d8b40; }
.ref-cal--seed .ref-cal-week.is-on { background: #8b5a2b; }
.ref-cal--plant .ref-cal-week.is-on { background: #2e7d32; }
.ref-cal--bloom .ref-cal-week.is-on { background: #8e24aa; }
.ref-cal--harvest .ref-cal-week.is-on { background: #c62828; }

/* --- User admin (account / login / register — pot-panel layout) --- */
.ua-page {
  max-width: 960px;
  margin: 0 auto 1.5em;
  padding: 0.25em 0.5em 1.5em;
}

.ua-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(12em, 0.85fr);
  gap: 1.25em;
  align-items: start;
}

@media (max-width: 720px) {
  .ua-layout { grid-template-columns: 1fr; }
}

/* .ua-msg shared with .ref-msg in UI-PR2 form chrome block */

.ua-panel {
  margin-bottom: 0;
}

.ua-lead {
  margin: 0 0 0.75em;
  line-height: 1.45;
  opacity: 0.92;
}

.ua-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45em 1em;
  align-items: baseline;
}

.ua-dl dt {
  margin: 0;
  font-size: 0.85em;
  font-weight: 600;
  color: #3a4a30;
  opacity: 0.85;
}

.ua-dl dd {
  margin: 0;
}

.ua-email {
  font-size: 0.95em;
  padding: 0.15em 0.4em;
  background: #eef2e8;
  border-radius: 3px;
}

.ua-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
}

.ua-badge-on {
  background: #d8eccc;
  color: #2a5a1a;
}

.ua-badge-off {
  background: #e8e8e4;
  color: #555;
}

.ua-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  align-items: center;
}

.ua-tag {
  display: inline-block;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #e4ecda;
  color: #2a3a22;
  border: 1px solid #c5cfc0;
}

.ua-tag-muted {
  background: #eee;
  color: #777;
  font-weight: 500;
}

.ua-qr {
  margin: 0.5em 0 1em;
  text-align: center;
}

.ua-qr img {
  display: inline-block;
  border: 1px solid #c5cfc0;
  border-radius: 4px;
  background: #fff;
  padding: 0.35em;
}

/* 2FA same-device setup */
.ua-2fa-block {
  margin: 0 0 1.1em;
  padding: 0.75em 0.85em;
  border: 1px solid #dce4d4;
  border-radius: 4px;
  background: #fafcf7;
}

.ua-2fa-same-device {
  border-color: #8aaa6a;
  box-shadow: 0 1px 6px rgba(60, 90, 40, 0.06);
}

.ua-2fa-heading {
  margin: 0 0 0.4em;
  font-size: 1.05em;
  color: #3a4a30;
}

.ua-2fa-steps {
  margin: 0.4em 0 0.75em 1.2em;
  padding: 0;
  line-height: 1.45;
}

.ua-2fa-steps li {
  margin: 0.25em 0;
}

.ua-2fa-actions {
  margin: 0.5em 0;
}

.ua-2fa-open-app {
  display: inline-block;
}

.ua-2fa-secret-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: stretch;
  margin: 0.25em 0 0.35em;
}

.ua-2fa-secret {
  flex: 1 1 12em;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  font-size: 0.95em;
}

.ua-2fa-copy {
  flex: 0 0 auto;
  margin-top: 0 !important;
  align-self: stretch;
}

.ua-2fa-backup-list {
  list-style: none;
  margin: 0.5em 0 0.75em;
  padding: 0.5em 0.75em;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5em, 1fr));
  gap: 0.35em 0.75em;
  background: #fff;
  border: 1px solid #c5cfc0;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

.ua-2fa-backup-list li {
  margin: 0;
}

.ua-panel-backup-codes {
  border-color: #8aaa6a;
  box-shadow: 0 1px 8px rgba(60, 90, 40, 0.08);
}

#ua_2fa_backup_all {
  min-height: 4.5em;
  resize: vertical;
}

/* Forms inside panels */
.ua-form label {
  display: block;
  margin-top: 0.55em;
  font-size: var(--form-label-size);
  color: var(--form-label-color);
  font-weight: 500;
}

.ua-form input[type=text],
.ua-form input[type=email],
.ua-form input[type=password],
.ua-form input[type=tel],
.ua-form select,
.ua-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0.25em 0 var(--form-field-gap);
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
  font: inherit;
  color: var(--text-color);
}

.ua-form input:focus,
.ua-form select:focus,
.ua-form textarea:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}

.ua-form .row-check {
  margin: 0.75em 0 0.35em;
}

.ua-form .row-check label {
  display: inline;
  font-weight: normal;
  margin: 0;
}

.ua-submit,
.guest-cta-submit {
  display: inline-block;
  margin-top: 0.85em;
  padding: 0.6em 1.15em;
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-fg) !important;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 600;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.ua-submit:hover,
.guest-cta-submit:hover {
  background: var(--btn-primary-hover) !important;
  color: var(--btn-primary-fg) !important;
  filter: none;
}

/* danger fills: see global button.btn-danger / .ua-submit-danger block */

/* --- Seed inventory --- */
.seed-inv-back-wrap {
  margin: var(--space-2, 8px) 0 0;
}
.seed-inv-back-wrap[hidden] {
  display: none;
}
/* Remove empty lot: override global green button styles */
.seed-inv-col-act {
  width: 1.6em;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}
button.seed-inv-remove,
button.seed-inv-remove:hover,
button.seed-inv-remove:focus,
button.seed-inv-remove:active {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #888 !important;
  cursor: pointer;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1;
  font-size: 14px !important;
  font-weight: normal;
  min-width: 0;
  min-height: 0;
  border-radius: 0;
  opacity: 0.85;
  transition: color 0.15s, opacity 0.15s;
}
button.seed-inv-remove:hover,
button.seed-inv-remove:focus {
  color: #a04030 !important;
  opacity: 1;
  background: transparent !important;
  background-color: transparent !important;
}
button.seed-inv-remove .seed-inv-trash-icon {
  display: inline-block;
  font-size: 15px;
  line-height: 1;
  font-weight: 300;
  pointer-events: none;
}

.ua-panel-delete {
  border-color: var(--surface-error-border);
  background: var(--surface-error-bg);
}

.grid_footer .footer-legal a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.grid_footer .footer-legal a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 520px) {
  .grid_footer .footer-row {
    white-space: normal;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 0.25em 0.75em;
  }
  .grid_footer .footer-legal {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
}

/* --- Legal pages --- */
.legal-page {
  max-width: 42em;
  margin: 0 auto 2em;
  padding: 0.5em 0.75em 2em;
  line-height: 1.5;
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin: 0.5em 0 1.25em;
  font-size: 0.9em;
}

.legal-toc a {
  color: #2a5a1a;
}

.legal-section {
  margin: 0 0 1.5em;
  padding-top: 0.25em;
}

.legal-section h3 {
  margin: 0 0 0.5em;
  color: #3a4a30;
  font-size: 1.1em;
}

.legal-section p {
  margin: 0 0 0.75em;
  opacity: 0.95;
}

.legal-back {
  margin-top: 1.5em;
  font-size: 0.9em;
}

/* --- User manual (seek-only; styles only apply when page is open) --- */
.help-page .help-intro {
  margin: 0 0 1em;
  opacity: 0.95;
}

.help-toc {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(250, 252, 248, 0.96);
  padding: 0.4em 0;
  border-bottom: 1px solid #d5e0d0;
  margin-bottom: 1.25em;
}

.help-section h3 {
  scroll-margin-top: 2.5em;
}

.help-subsection {
  margin: 0.75em 0 1em;
}

.help-subsection h4 {
  margin: 0 0 0.4em;
  color: #3a4a30;
  font-size: 1em;
  scroll-margin-top: 2.5em;
}

.help-list {
  margin: 0 0 0.75em 1.25em;
  padding: 0;
}

.help-list li {
  margin: 0 0 0.35em;
}

.help-note {
  margin: 0 0 0.75em;
  padding: 0.55em 0.75em;
  border-left: 3px solid #5a7a4a;
  background: #f0f5ec;
  font-size: 0.95em;
}

.help-lang-fallback {
  margin: 0 0 1em;
  font-size: 0.9em;
  font-style: italic;
  opacity: 0.85;
}

.help-figure {
  margin: 0.75em 0 1.25em;
  padding: 0.5em;
  border: 1px solid #d5e0d0;
  border-radius: 6px;
  background: #fafcf8;
  max-width: 100%;
}

.help-figure img {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin: 0 auto;
}

.help-figure .help-video-el,
.help-video .help-video-el {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
  background: #1a2218;
}

.help-figure figcaption {
  margin-top: 0.5em;
  font-size: 0.9em;
  color: #4a5a40;
  text-align: center;
  line-height: 1.4;
}

/* Shop customer help page (?what=shop_help) — larger type, separate pack */
.shop-help-page {
  max-width: 36em;
  font-size: 1.08rem;
  line-height: 1.55;
}

.shop-help-page .help-intro {
  font-size: 1.1rem;
}

.shop-help-page .help-section h3 {
  font-size: 1.2rem;
}

.shop-help-page .help-list li {
  margin-bottom: 0.5em;
}

.shop-help-page .help-note {
  font-size: 1.02rem;
  padding: 0.65em 0.85em;
  border-left-width: 4px;
}

/* --- Cookie banner (fixed bottom strip) --- */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65em 1em;
  padding: 0.55em 0.85em;
  background: rgba(45, 58, 32, 0.95); /* dark earth-olive strip */
  color: #f4f6f0;
  font-size: 0.82em;
  line-height: 1.35;
  box-shadow: 0 -2px 14px rgba(40, 55, 25, 0.22);
  border-top: 1px solid rgba(155, 176, 115, 0.35);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.cookie-banner-hide {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}

.cookie-banner-text {
  margin: 0;
  max-width: 48em;
  text-align: center;
}

.cookie-banner-text a {
  color: #d8eccc;
  text-decoration: underline;
}

.cookie-banner-ok {
  flex: 0 0 auto;
  padding: 0.35em 0.9em;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.cookie-banner-ok:hover {
  background: var(--btn-primary-hover);
}

/* Side actions panel — vertical list like field tools */
.ua-panel-actions .pot-panel-body {
  padding: 0.4em 0;
}

.ua-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ua-menu li {
  margin: 0;
  border-bottom: 1px solid var(--surface-divider);
}

.ua-menu li:last-child {
  border-bottom: none;
}

.ua-menu a {
  display: block;
  padding: 0.55em 0.85em;
  text-decoration: none;
  color: var(--surface-title);
  font-weight: 500;
}

.ua-menu a:hover {
  background: var(--btn-quiet-hover-bg);
}

.ua-menu a.active {
  font-weight: 700;
  background: #e8f0dc;
  color: var(--brand-olive);
  border-left: 3px solid var(--brand-olive);
  padding-left: calc(0.85em - 3px);
}

.ua-menu a.ua-menu-muted {
  color: #666;
  font-weight: 400;
}

.ua-menu a.ua-menu-danger {
  color: #8a3020;
}

.ua-menu a.ua-menu-danger:hover {
  background: #f8ebe8;
}

/* --- Guest home (logged-out: promo + login + dual register CTAs) --- */
.guest-home {
  max-width: 960px;
  margin: 0 auto 2em;
  padding: 0.5em 1em 2em;
}
.guest-home-hero {
  text-align: left;
  margin-bottom: 1em;
  width: 100%;
  box-sizing: border-box;
}
/* Title is the header banner only — keep class for register subpages */
.guest-home-title {
  margin: 0;
  font-size: 1.6rem;
  color: #3a4a30;
}
.guest-home-lead {
  max-width: none;
  width: 100%;
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  color: #3a4a30;
  line-height: 1.4;
}
.guest-home-cta {
  max-width: none;
  width: 100%;
  margin: 0.4em 0 0;
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.92;
  color: #3d5235;
}
/* Two columns: left video+login, right garden+observer; stacks to one col */
.guest-home-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.25em;
  align-items: start;
}
.guest-home-col {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
  min-width: 0;
}
.guest-home-promo {
  width: 100%;
}
.guest-home-promo-video {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #0a1208;
  box-shadow: 0 4px 18px rgba(40, 60, 30, 0.14);
  aspect-ratio: 16 / 9;
}
.guest-home-promo-caption {
  margin: 0.4em 0 0;
  font-size: 0.88em;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .guest-home-layout { grid-template-columns: 1fr; }
}
.guest-home-register {
  border-color: var(--brand-olive-soft);
  box-shadow: 0 2px 10px rgba(60, 90, 40, 0.1);
}
.guest-cta {
  display: inline-block;
  margin-top: 0.5em;
  padding: 0.65em 1.2em;
  background: var(--btn-primary-bg);
  color: #fff !important;
  text-decoration: none;
  border-radius: var(--btn-radius);
  font-weight: 600;
}
.guest-cta:hover {
  background: var(--btn-primary-hover);
  color: #fff !important;
}
.guest-home .ua-form label { display: block; margin-top: 0.45em; font-size: 0.9em; }
.guest-home .ua-form input[type=text],
.guest-home .ua-form input[type=email],
.guest-home .ua-form input[type=tel],
.guest-home .ua-form input[type=password],
.guest-home .ua-form select {
  width: 100%;
  box-sizing: border-box;
  margin: 0.2em 0 0.35em;
}
/* Anti-bot honeypot: off-screen, not display:none (some bots skip display:none) */
/* Guest farm list: ~3–4 rows, scroll if more */
.guest-farm-scroll {
  max-height: 7.25rem; /* ~3.5–4 compact rows */
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0.35em 0 0.75em;
  padding: 0.15em 0.25em 0.15em 0;
  border: 1px solid rgba(60, 80, 50, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.55);
  -webkit-overflow-scrolling: touch;
}
.guest-farm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.guest-farm-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  padding: 0.3em 0.4em;
  border-bottom: 1px solid rgba(60, 80, 50, 0.08);
  min-height: 1.65rem;
  font-size: 0.9em;
  line-height: 1.25;
}
.guest-farm-item:last-child {
  border-bottom: none;
}
.guest-farm-logo {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.guest-farm-logo-empty {
  display: inline-block;
  background: rgba(90, 120, 70, 0.12);
  box-shadow: none;
}
.guest-farm-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05em;
}
.guest-farm-name {
  font-weight: 600;
  color: #3a4a30;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-farm-loc {
  font-size: 0.82em;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-farm-plantings {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
  font-weight: 600;
  color: #4a6a38;
  background: rgba(90, 120, 70, 0.1);
  padding: 0.15em 0.45em;
  border-radius: 999px;
  white-space: nowrap;
}
.guest-register-page {
  max-width: 32rem;
  margin: 0 auto;
}
.guest-register-wrap {
  margin-top: 0.5em;
}
/* Create garden (primary) + observe (secondary) cards */
.guest-home-create {
  border-color: var(--brand-olive-soft);
  box-shadow: 0 2px 12px rgba(60, 100, 40, 0.12);
}
.guest-home-create .pot-panel-title {
  color: var(--brand-olive);
}
.guest-cta-primary {
  background: var(--btn-primary-bg);
  font-size: 1.05em;
}
.guest-cta-primary:hover {
  background: var(--btn-primary-hover);
}
.guest-cta-secondary {
  background: var(--brand-olive-soft);
}
.guest-cta-secondary:hover {
  background: var(--brand-olive);
}
.guest-home-login {
  max-width: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

/* --- Self-serve onboarding wizard (UI-PR4 shell chrome; map gestures unchanged) --- */
.onboard-shell {
  width: 100%;
  max-width: min(52rem, 100%);
  margin: 0 auto;
  padding: 0.5em 0.75em 2.5em;
  box-sizing: border-box;
  overflow-x: hidden;
}
.onboard-shell input[type="text"],
.onboard-shell input[type="number"],
.onboard-shell input[type="email"],
.onboard-shell input[type="search"],
.onboard-shell select,
.onboard-shell textarea,
.onboard-shell .ua-form input,
.onboard-shell .ua-form select,
.onboard-shell .area-canvas-dims input,
.onboard-shell .area-canvas-dims select {
  max-width: 100%;
  box-sizing: border-box;
}
.onboard-shell .pot-panel,
.onboard-shell .area-canvas-sources,
.onboard-shell .area-canvas-card,
.onboard-shell .first-outline-draw,
.onboard-shell #zone_draw_shell {
  max-width: 100%;
  box-sizing: border-box;
}
.onboard-hero {
  margin-bottom: 1em;
}
.onboard-title {
  margin: 0;
  font-size: 1.5rem;
  color: var(--surface-title);
}
.onboard-lead {
  margin: 0.45em 0 0;
  line-height: 1.45;
  color: var(--surface-text-muted);
  opacity: 0.95;
}
.onboard-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.5em;
  list-style: none;
  margin: 0 0 1.1em;
  padding: 0;
  counter-reset: none;
}
.onboard-progress-item {
  font-size: 0.85em;
  padding: 0.35em 0.65em;
  border-radius: 999px;
  background: var(--surface-panel-bg);
  border: 1px solid var(--surface-divider);
  color: var(--surface-text-muted);
}
.onboard-progress-item a {
  color: inherit;
  text-decoration: none;
}
.onboard-progress-item.is-current {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: #fff;
  font-weight: 600;
}
.onboard-progress-item.is-done:not(.is-current) {
  background: var(--surface-msg-bg);
  border-color: var(--surface-panel-border-soft);
  color: var(--surface-title);
}
.onboard-step-num {
  display: inline-block;
  min-width: 1.1em;
  font-weight: 700;
  margin-right: 0.2em;
}
.onboard-step .pot-panel-title {
  font-size: 1.1rem;
  color: var(--surface-title);
}
.onboard-map {
  min-height: 280px;
  height: 42vh;
  max-height: 420px;
  border-radius: var(--surface-panel-radius);
  margin: 0.5em 0 0.75em;
  border: 1px solid var(--surface-panel-border);
  background: var(--surface-input-bg);
  box-sizing: border-box;
}
/* Dim fields: each cell is label+control stacked (not interleaved labels/inputs) */
.onboard-size-row,
.area-canvas-dims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem 1rem;
  align-items: start;
  max-width: 36rem;
}
.area-canvas-dim {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
.area-canvas-dim label {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--surface-title, #2a3520);
}
.area-canvas-dim input,
.area-canvas-dim select {
  width: 100%;
  max-width: 100%;
  min-height: var(--touch-min, 44px);
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .onboard-size-row,
  .area-canvas-dims {
    grid-template-columns: 1fr;
    max-width: none;
  }
}
.onboard-nav {
  margin-top: 1em;
  font-size: 0.95em;
}
/* Wizard action row: Back (secondary) + primary validate/save */
.onboard-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65em;
  margin-top: 1.1em;
}
.onboard-actions-stack {
  flex-direction: column;
  align-items: stretch;
  max-width: 22rem;
}
.onboard-inline-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.onboard-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 2.5rem;
  padding: 0.55em 1.15em;
  border-radius: var(--surface-panel-radius);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none !important;
  cursor: pointer;
  border: 1px solid transparent;
  line-height: 1.25;
  font-family: inherit;
}
.onboard-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg) !important;
  border-color: var(--btn-primary-bg);
}
.onboard-btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  filter: none;
}
.onboard-btn-secondary {
  background: var(--surface-input-bg);
  color: var(--btn-quiet-fg) !important;
  border-color: var(--btn-quiet-border);
}
.onboard-btn-secondary:hover {
  background: var(--btn-quiet-hover-bg);
}
.onboard-btn-back {
  background: var(--btn-quiet-bg);
  color: var(--btn-quiet-fg) !important;
  border-color: var(--btn-quiet-border);
  font-weight: 600;
}
.onboard-btn-back:hover {
  background: var(--btn-quiet-hover-bg);
  border-color: var(--surface-panel-border);
}
/* Quiet buttons: beat global white text */
button.onboard-btn-secondary,
button.onboard-btn-back {
  color: var(--btn-quiet-fg) !important;
}
.onboard-checklist {
  list-style: none;
  margin: 0.5em 0 1em;
  padding: 0;
}
.onboard-checklist li {
  padding: 0.35em 0 0.35em 1.6em;
  position: relative;
}
.onboard-checklist li.is-done::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--brand-olive);
  font-weight: 700;
}
.onboard-checklist li.is-skip::before {
  content: "–";
  position: absolute;
  left: 0;
  opacity: 0.6;
}
/* First outline (onboard / zone_new top): same map chrome as zone manager —
 * do NOT restyle toolbar or shrink the host — see .first-outline-draw below. */
.first-outline-draw {
  margin: 0.5em 0 1em;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* keep SVG inside column; parent .grid_main scrolls */
}
/* Form fields after map must stay below the map, not under an overflow */
.onboard-shell .zone-form,
.onboard-shell .onboard-form {
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.onboard-sat-reconfig {
  font-weight: 600;
  color: var(--brand-olive);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.onboard-sat-reconfig:hover {
  color: var(--brand-olive-hover);
}

/* #zone_manager map host: clip sat; sizing is in the 75vh block below */
#zone_manager .zone-draw-host {
  overflow: hidden;
  max-width: 100%;
}
.onboard-field-tip {
  grid-column: 1 / -1;
  margin: 0 0 0.75em;
  padding: 0.75em 1em;
  background: var(--surface-msg-bg);
  border: 1px solid var(--surface-msg-border);
  border-left: 4px solid var(--brand-olive-soft);
  border-radius: var(--surface-panel-radius);
  color: var(--surface-title);
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 1px 2px rgba(60, 80, 40, 0.06);
}
a.onboard-sat-link {
  display: inline-block;
  text-decoration: none;
  color: #fff !important;
  padding: 0.65em 1.2em;
  border-radius: 4px;
}
.ua-org-pick {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  padding: 0.5em 0.75em 0.65em;
  margin: 0.5em 0 0.75em;
}
.ua-org-pick legend {
  font-weight: 600;
  padding: 0 0.25em;
}
.ua-org-table {
  width: 100%;
  margin: 0.5em 0 0;
  border-collapse: collapse;
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
  overflow: hidden;
}
.ua-org-table th,
.ua-org-table td {
  vertical-align: middle;
  padding: 0.4em 0.55em;
  border-bottom: 1px solid var(--surface-divider);
}
.ua-org-table th {
  font-size: 0.85em;
  white-space: nowrap;
  background: var(--surface-table-head);
  font-weight: 700;
  color: var(--surface-title);
}
.ua-org-table tr:nth-child(even) td {
  background: var(--surface-table-alt);
}
.ua-org-table tr:hover td {
  background: var(--surface-table-hover);
}
.ua-org-table tr.ua-org-active td {
  background: rgba(69, 99, 17, 0.1);
}
.ua-org-table td.ua-org-actions {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
.ua-org-table td.ua-org-actions .ua-badge {
  display: inline-block;
  min-width: 4.5em;
  text-align: center;
  box-sizing: border-box;
}
.ua-org-table td.ua-org-actions .ua-submit {
  min-width: 5.5em;
}
.ua-form-inline {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}
.ua-form-inline .ua-submit {
  margin-top: 0;
  padding: 0.25em 0.55em;
  font-size: 0.85em;
}
.nav-org-badge {
  font-size: 0.8em;
  opacity: 0.85;
  margin-left: 0.35em;
}
.ua-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Colour picker (ColorSelect: swatch + text + palette/RGB popover) --- */
.color-select,
.zone-color-picker {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: middle;
}
.color-select-row,
.zone-color-picker-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45em;
  margin: 0.25em 0 0.5em;
}
/*
 * Undo global `button { green bg, white text, 18px }` without collapsing
 * empty swatch/chip buttons. Prefer element+class so sizes win over
 * `.color-select button { width/height:auto }` (that bug made the square 0×0).
 */
.color-select button,
.zone-color-picker button {
  color: inherit;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1;
  transition: none;
  box-shadow: none;
  filter: none;
}
.color-select button:hover,
.zone-color-picker button:hover {
  filter: none;
}
/* Swatch: must beat `.color-select button` specificity */
button.color-select-swatch,
button.zone-color-swatch,
.color-select button.color-select-swatch,
.zone-color-picker button.zone-color-swatch {
  flex: 0 0 2rem;
  flex-shrink: 0;
  box-sizing: border-box;
  display: inline-block;
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid #666 !important;
  border-radius: 4px !important;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  vertical-align: middle;
  background-clip: padding-box;
  /* fill set via inline style (named colour / #hex) — do not force transparent */
  background-image: none;
}
button.color-select-swatch:hover,
button.color-select-swatch:focus-visible,
button.zone-color-swatch:hover,
button.zone-color-swatch:focus-visible {
  outline: 2px solid #2d6a4f;
  outline-offset: 1px;
}
.color-select-text,
.zone-color-text {
  width: 8.5em;
  min-width: 6em;
  max-width: 12em;
  flex: 1 1 auto;
  font-family: inherit;
  font-size: 0.95em;
  box-sizing: border-box;
}
.color-select-popover {
  /* left/top set in JS (position:fixed) so overflow:auto panes do not clip */
  position: fixed;
  z-index: 200;
  min-width: min(18rem, 92vw);
  max-width: min(22rem, 96vw);
  max-height: min(22rem, 70vh);
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #888;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  color: #222;
}
.color-select-popover[hidden] {
  display: none !important;
}
.color-select-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid #ccc;
  background: #f4f4f4;
}
.color-select button.color-select-tab {
  flex: 1 1 50%;
  margin: 0;
  padding: 0.45em 0.6em !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: #333 !important;
  font: inherit;
  font-size: 0.9em !important;
  cursor: pointer;
  width: auto !important;
  height: auto !important;
  min-width: 0;
  min-height: 0;
}
.color-select button.color-select-tab.is-active {
  border-bottom-color: #2d6a4f !important;
  background: #fff !important;
  background-color: #fff !important;
  font-weight: 600;
}
.color-select button.color-select-tab:hover,
.color-select button.color-select-tab:focus-visible {
  background: #eef6f1 !important;
  background-color: #eef6f1 !important;
}
.color-select-panel {
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.5em 0.55em 0.65em;
  -webkit-overflow-scrolling: touch;
}
.color-select-panel[hidden] {
  display: none !important;
}
.color-select-group + .color-select-group {
  margin-top: 0.55em;
}
.color-select-group-title {
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
  margin: 0 0 0.25em;
}
.color-select-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.color-select button.color-select-chip {
  box-sizing: border-box;
  display: inline-block;
  width: 1.45rem !important;
  height: 1.45rem !important;
  min-width: 1.45rem !important;
  min-height: 1.45rem !important;
  padding: 0 !important;
  margin: 0;
  border: 1px solid rgba(0, 0, 0, 0.28) !important;
  border-radius: 3px !important;
  cursor: pointer;
  flex-shrink: 0;
  /* background-color set inline per named colour */
  background-image: none;
}
.color-select button.color-select-chip.color-select-chip--light {
  border-color: #999 !important;
}
.color-select button.color-select-chip:hover,
.color-select button.color-select-chip:focus-visible {
  outline: 2px solid #2d6a4f;
  outline-offset: 1px;
  z-index: 1;
}
.color-select button.color-select-chip.is-selected {
  outline: 2px solid #1b4332;
  outline-offset: 1px;
  box-shadow: 0 0 0 1px #fff inset;
}
.color-select-panel[data-panel="rgb"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65em;
  padding: 0.85em 0.75em 1em;
}
.color-select-panel[data-panel="rgb"][hidden] {
  display: none !important;
}
.color-select-wheel-label {
  display: block;
  margin: 0;
}
.color-select-wheel {
  width: 4.5rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #888;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
}
.color-select-wheel::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.color-select-wheel::-webkit-color-swatch {
  border: none;
  border-radius: 2px;
}
.color-select-hex-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  letter-spacing: 0.02em;
}
.zone-scale-hint {
  margin: 0.15em 0 0.6em;
  font-size: 0.85em;
  opacity: 0.85;
}

/* Zone manager: map-primary column layout (desktop left / mobile first).
 * Pane (.zone-manager-map / .grid_main2l) must scroll when map chrome + SVG
 * exceed the column height — do NOT flex-shrink shell/host into a clipped box. */
#zone_manager.grid_main_2c_21 .zone-manager-map {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#zone_manager .zone-draw-shell {
  /* Natural height from toolbar + map; parent pane scrolls */
  flex: 0 0 auto;
  min-height: 0;
  height: auto;
  /* Scroll gutter: 3% of viewport width (not fixed px — huge on phones) */
  margin-right: 3vw;
  max-width: calc(100% - 3vw);
  box-sizing: border-box;
}
/* Map host: max 75vh. Applies to zone manager AND first-outline (same L&F).
 * Top/self sizes to content aspect; mother (view-in-parent) uses full 75vh. */
#zone_manager .zone-draw-host,
.zone-draw-shell.view-self .zone-draw-host,
.zone-draw-shell.first-outline-draw .zone-draw-host {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 75vh;
  min-height: 0;
  overflow: hidden;
  margin-right: 0;
  box-sizing: border-box;
  background: transparent !important;
  padding: 0;
}
/* Top area: height follows SVG aspect (width 100% → natural height ≤ 75vh) */
#zone_manager .zone-draw-shell.view-self .zone-draw-host,
.zone-draw-shell.view-self .zone-draw-host,
.zone-draw-shell.first-outline-draw .zone-draw-host {
  height: auto;
}
/* Child on mother: fixed workspace so map fills the edit column */
#zone_manager .zone-draw-shell.view-in-parent .zone-draw-host {
  height: 75vh;
}
#zone_manager .zone-draw-host > h3,
#zone_manager .zone-draw-host > table {
  flex: 0 0 auto;
}
#zone_manager .zone-draw-host > a,
.zone-draw-shell.view-self .zone-draw-host > a,
.zone-draw-shell.first-outline-draw .zone-draw-host > a {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  width: 100%;
}
#zone_manager .zone-draw-shell.view-in-parent .zone-draw-host > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
#zone_manager .zone-draw-host > svg,
#zone_manager .zone-draw-host > a > svg,
#zone_manager .zone-draw-host svg,
.zone-draw-shell.view-self .zone-draw-host > svg,
.zone-draw-shell.view-self .zone-draw-host > a > svg,
.zone-draw-shell.view-self .zone-draw-host svg,
.zone-draw-shell.first-outline-draw .zone-draw-host > svg,
.zone-draw-shell.first-outline-draw .zone-draw-host > a > svg,
.zone-draw-shell.first-outline-draw .zone-draw-host svg {
  display: block;
  width: 100%;
  max-width: 100%;
  touch-action: pan-y;
  background: transparent;
}
/* Top: intrinsic aspect from viewBox — no forced 75vh frame with empty bands */
#zone_manager .zone-draw-shell.view-self .zone-draw-host > svg,
#zone_manager .zone-draw-shell.view-self .zone-draw-host > a > svg,
#zone_manager .zone-draw-shell.view-self .zone-draw-host svg,
.zone-draw-shell.view-self .zone-draw-host > svg,
.zone-draw-shell.view-self .zone-draw-host > a > svg,
.zone-draw-shell.view-self .zone-draw-host svg,
.zone-draw-shell.first-outline-draw .zone-draw-host > svg,
.zone-draw-shell.first-outline-draw .zone-draw-host > a > svg,
.zone-draw-shell.first-outline-draw .zone-draw-host svg {
  height: auto;
  max-height: 75vh;
}
/* Mother: SVG fills the 75vh host */
#zone_manager .zone-draw-shell.view-in-parent .zone-draw-host > svg,
#zone_manager .zone-draw-shell.view-in-parent .zone-draw-host > a > svg,
#zone_manager .zone-draw-shell.view-in-parent .zone-draw-host svg {
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
}
/* Pick-an-area (no map yet) */
#zone_manager.zone-manager-pick .zone-manager-map {
  min-height: 0;
}
.zone-roots-pick {
  padding: 0.75em 0.25em 1em;
}
.zone-roots-pick-intro {
  margin: 0 0 0.75em;
  font-size: 1.02em;
  color: #2a3320;
  line-height: 1.4;
}
.zone-roots-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.5em;
  margin: 0;
  padding: 0.55em 0.65em;
  background: #eef2e8;
  border: 1px solid #c5d0b8;
  border-radius: 10px;
}
.zone-roots-label {
  font-weight: 700;
  font-size: 0.9em;
  color: #3a4528;
  margin-right: 0.2em;
}
.zone-roots-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 0.85em;
  border-radius: 999px;
  border: 1px solid var(--brand-olive);
  background: #fff;
  color: #2a3320;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
}
.zone-roots-chip:hover {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: #fff;
}
.zone-manager-pick-hint {
  margin-top: 0.5em;
}
.zone-draw-context {
  margin: 0 0 0.25em;
  font-weight: 600;
  color: var(--surface-title);
}
.zone-draw-just-added {
  border-left: 4px solid var(--brand-olive);
  padding: 0.55em 0.85em;
  background: var(--surface-msg-bg);
  border-top: 1px solid var(--surface-msg-border);
  border-right: 1px solid var(--surface-msg-border);
  border-bottom: 1px solid var(--surface-msg-border);
  border-radius: 0 var(--surface-input-radius) var(--surface-input-radius) 0;
  font-weight: 600;
  color: var(--surface-title);
}
/* Selected child (viewed inside mother): dim saved shape so draft stands out */
#zone_draw_host a.zone-draw-selected {
  outline: none;
}
#zone_draw_host a.zone-draw-selected > g {
  opacity: 0.45;
}
#zone_draw_host a.zone-draw-selected:hover > g {
  opacity: 0.7;
}

/* Top-zone size modal (Add root area) */
.zone-top-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.45);
}
.zone-top-modal[hidden] {
  display: none !important;
}
.zone-top-modal-card {
  width: min(420px, 100%);
  background: #fafaf6;
  border-radius: 10px;
  border: 1px solid #8a9a7a;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.zone-top-modal-card h3 {
  margin: 0 0 0.5rem;
}
.zone-top-size-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em 0.75em;
  margin: 0.75em 0;
}
.zone-top-size-row label {
  font-size: 0.9em;
  font-weight: 600;
}
.zone-top-size-row input,
.zone-top-size-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4em 0.5em;
}
.zone-top-size-row label[for="zone_top_dim_unit"],
.zone-top-size-row #zone_top_dim_unit {
  grid-column: 1 / -1;
}
.zone-top-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
  margin-top: 0.75em;
}
body.zone-top-modal-open {
  overflow: hidden;
}

/* Group members outside the zone outline — zone Update + field planting save */
.points-oob-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(40, 50, 30, 0.45);
}
.points-oob-modal[hidden] {
  display: none !important;
}
.points-oob-card {
  width: min(28rem, 100%);
  background: #fafaf6;
  border-radius: 10px;
  border: 1px solid #8a9a7a;
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-lg);
}
.points-oob-card h3 {
  margin: 0 0 0.5rem;
}
.points-oob-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.points-oob-actions button {
  width: 100%;
  min-height: var(--touch-min);
}
.points-oob-banner {
  margin: 0.6rem 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c4b06a;
  border-radius: 8px;
  background: #f7f1d8;
}
.points-oob-banner p {
  margin: 0 0 0.5rem;
}
.points-oob-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.points-oob-banner-actions button {
  min-height: var(--touch-min);
}
body.points-oob-open {
  overflow: hidden;
}

/* Zone draw GUI — Browse | Edit modes + map actions */
.zone-draw-shell {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-height: 0;
}
.zone-draw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.5em;
}
.zone-mode-seg {
  display: inline-flex;
  border: 1px solid #8a9a7a;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2e8;
}
.zone-mode {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.4em 0.75em;
  border: 0;
  border-right: 1px solid #8a9a7a;
  background: transparent;
  color: #2a3320;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9em;
}
.zone-mode:last-child {
  border-right: 0;
}
.zone-mode .material-icons {
  font-size: 1.25em;
  line-height: 1;
}
.zone-mode:hover:not(:disabled) {
  background: #e0e8d4;
}
.zone-mode.is-active {
  background: var(--btn-primary-bg);
  color: #fff;
}
.zone-mode:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Explicit gesture tools: map pan/zoom always; zone tools in Edit */
.zone-tool-seg {
  display: inline-flex;
  border: 1px solid #8a9a7a;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2e8;
}
.zone-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45em;
  height: 2.45em;
  min-width: 2.45em;
  min-height: 2.45em;
  padding: 0;
  border: 0;
  border-right: 1px solid #8a9a7a;
  background: transparent;
  color: #2a3320;
  cursor: pointer;
}
.zone-tool:last-child {
  border-right: 0;
}
.zone-tool .material-icons {
  font-size: 1.3em;
}
.zone-tool.is-active {
  background: var(--brand-tool-active);
  color: #fff;
}
.zone-tool.zone-tool-edit[hidden],
.zone-tool.zone-shape-close[hidden],
#zone_draw_planting_dir[hidden] {
  display: none !important;
}
#zone_draw_planting_dir:not([hidden]) {
  display: inline-flex;
}
.zone-tool.zone-shape-close {
  background: var(--btn-primary-bg);
  color: #fff;
}
#zone_draw_arc_straighten {
  background: var(--brand-tool-active, #3d5a80);
  color: #fff;
}
.zone-draw-arc-sel,
.zone-draw-arc-tan-arm {
  pointer-events: none;
}
.zone-draw-shell.mode-edit .zone-tool-edit:not([hidden]) {
  display: inline-flex;
}
/* Legacy shape strip (onboarding / zone wizard) */
.zone-shape-seg {
  display: none;
  border: 1px solid #8a9a7a;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2e8;
}
.zone-draw-shell.mode-edit .zone-shape-seg,
.zone-wizard .zone-shape-seg {
  display: inline-flex;
}
.zone-shape {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35em;
  height: 2.35em;
  padding: 0;
  border: 0;
  border-right: 1px solid #8a9a7a;
  background: transparent;
  color: #2a3320;
  cursor: pointer;
}
.zone-shape:last-child {
  border-right: 0;
}
.zone-shape .material-icons {
  font-size: 1.3em;
}
.zone-shape.is-active {
  background: var(--brand-tool-active);
  color: #fff;
}
/* Children bind (follow mother vs pin to map/root) — Edit only, when zone has children */
.zone-children-bind-seg {
  display: none;
  border: 1px solid #8a9a7a;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2e8;
}
.zone-draw-shell.mode-edit .zone-children-bind-seg {
  display: inline-flex;
}
.zone-children-bind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35em;
  height: 2.35em;
  padding: 0;
  border: 0;
  border-right: 1px solid #8a9a7a;
  background: transparent;
  color: #2a3320;
  cursor: pointer;
}
.zone-children-bind:last-child {
  border-right: 0;
}
.zone-children-bind .material-icons {
  font-size: 1.25em;
}
.zone-children-bind.is-active {
  background: var(--brand-olive);
  color: #fff;
}
/* Zone tag admin (catalog) */
.zone-tag-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0.75em 0 1em;
}
.zone-tag-tab {
  display: inline-block;
  padding: 0.4em 0.85em;
  border: 1px solid #8a9a7a;
  border-radius: 8px;
  background: #eef2e8;
  color: #2a3320;
  font-weight: 600;
  text-decoration: none;
}
.zone-tag-tab.is-active {
  background: var(--btn-primary-bg);
  border-color: var(--brand-olive-hover);
  color: #fff;
}
.zone-tag-sys-help {
  border-left: 4px solid var(--brand-olive-soft);
  background: #f3f8eb;
  padding: 0.6em 0.85em;
  margin: 0.5em 0 0.85em;
  border-radius: 0 6px 6px 0;
}
.zone-tag-sys-help-body {
  margin: 0.25em 0 0;
  color: #2a3320;
  font-size: 0.95em;
  line-height: 1.45;
}
.zone-tag-badge {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 700;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  vertical-align: middle;
}
.zone-tag-badge-sys {
  background: #e8f0dc;
  color: #3a5520;
  border: 1px solid #8aaa6a;
}
.zone-tag-table {
  width: 100%;
  border-collapse: collapse;
}
.zone-tag-table th,
.zone-tag-table td {
  text-align: left;
  padding: 0.4em 0.5em;
  border-bottom: 1px solid #dce4d4;
}
.zone-tag-table tr.is-active {
  background: #f3f8eb;
}
.zone-tag-delete-form {
  margin-top: 1em;
  padding-top: 0.75em;
  border-top: 1px solid #dce4d4;
}
.zone-tag-locked {
  margin-top: 0.75em;
  color: #6a5030;
}

/* Zone type multi-tag (culture, planche, …) */
.zone-type-field {
  margin: 0.35em 0 0.75em;
}
.zone-type-hint {
  margin: 0.15em 0 0.4em;
}
.zone-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin-bottom: 0.45em;
}
.zone-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.7em;
  border: 1px solid #8a9a7a;
  border-radius: 999px;
  background: #eef2e8;
  color: #2a3320;
  font-size: 0.88em;
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}
.zone-type-chip:hover {
  background: #e0e8d4;
}
.zone-type-chip.is-on {
  background: var(--btn-primary-bg);
  border-color: var(--brand-olive-hover);
  color: #fff;
}
.zone-type-input {
  width: 100%;
  box-sizing: border-box;
}

/* Zone manager form: one field per line, label | input on the same row */
#zone_manager .zone-form .zone-form-body {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
#zone_manager .zone-form .zone-form-row {
  display: grid;
  align-items: center;
  gap: 0.35em 0.65em;
  margin: 0;
  min-width: 0;
}
/* Fixed-ish label column so short inputs align; works in narrow form column */
#zone_manager .zone-form .zone-form-row--compact {
  grid-template-columns: minmax(5.5rem, 8.5rem) minmax(0, 1fr);
}
#zone_manager .zone-form .zone-form-row--full {
  grid-template-columns: 1fr;
}
#zone_manager .zone-form .zone-form-row label,
#zone_manager .zone-form .zone-form-field-label {
  display: block;
  margin: 0;
  font-size: 0.88em;
  font-weight: 600;
  color: #3a4a30;
  line-height: 1.3;
  min-width: 0;
}
#zone_manager .zone-form .zone-form-row--full label {
  margin-bottom: 0.2em;
}
#zone_manager .zone-form .zone-form-row input[type=text],
#zone_manager .zone-form .zone-form-row input[type=number],
#zone_manager .zone-form .zone-form-row select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.4em 0.5em;
  font-size: 0.95em;
}
#zone_manager .zone-form .zone-field-readonly {
  background-color: #eeeeee;
}
#zone_manager .zone-form .zone-form-row--color {
  align-items: start;
}
#zone_manager .zone-form .zone-form-row--color .zone-form-field-label {
  padding-top: 0.45em;
}
#zone_manager .zone-form .zone-form-row--color .zone-color-row {
  min-width: 0;
}
#zone_manager .zone-form .zone-form-row--color .zone-color-picker,
#zone_manager .zone-form .zone-form-row--color .color-select {
  width: 100%;
}
#zone_manager .zone-form .zone-form-row--color .zone-color-picker-row,
#zone_manager .zone-form .zone-form-row--color .color-select-row {
  margin: 0;
}
#zone_manager .zone-form .zone-form-row--color .color-select-text,
#zone_manager .zone-form .zone-form-row--color .zone-color-text,
#zone_manager .zone-form .zone-form-row--color input.color-select-text {
  width: 8.5em !important;
  max-width: 12em !important;
  flex: 1 1 6em;
}
/* Popover is position:fixed (JS); keep stacking context reasonable */
#zone_manager .zone-form .zone-form-row--color .color-select.is-open {
  z-index: 40;
}
#zone_manager .zone-form .zone-form-meta,
#zone_manager .zone-form .zone-form-links {
  margin: 0.4em 0 0.15em;
  font-size: 0.9em;
}
#zone_manager .zone-form .zone-scale-hint,
#zone_manager .zone-form .zone-type-hint,
#zone_manager .zone-form .ref-hint {
  margin: 0.2em 0 0.3em;
  font-size: 0.85em;
  line-height: 1.35;
}
#zone_manager .zone-form .zone-type-field {
  margin: 0.5em 0 0.35em;
}
#zone_manager .zone-form .pot-panel {
  margin-bottom: 0.65em;
}
#zone_manager .zone-form .pot-panel-title {
  padding: 0.4em 0.6em;
  font-size: 0.95em;
}
#zone_manager .zone-form .pot-panel-body {
  padding: 0.55em 0.65em 0.65em;
}
/* Very narrow (phone or thin form column): stack label above input */
@media (max-width: 360px) {
  #zone_manager .zone-form .zone-form-row--compact {
    grid-template-columns: 1fr;
    gap: 0.2em;
  }
  #zone_manager .zone-form .zone-form-row--color .zone-form-field-label {
    padding-top: 0;
  }
}
/* Disabled action buttons (e.g. Add under ghost) */
#zone_manager .zone-act:disabled,
.zone-map-actions .zone-act:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.25);
}

/* Anchor diamond (SVG) — grab to move about outer origin / rotate pivot */
.zone-draw-anchor {
  cursor: grab;
}
.zone-draw-shell.has-sat-bg .zone-draw-anchor,
.zone-draw-shell.has-sat-bg .zone-draw-anchor-axis-x,
.zone-draw-shell.has-sat-bg .zone-draw-anchor-axis-y {
  /* SVG attributes carry color; filter helps sat contrast */
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.9));
}
.zone-draw-shell.has-sat-bg .zone-draw-rotate {
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85));
}

.zone-draw-icon-btn.zone-draw-confirm {
  border-color: #6b8f3c;
  color: #3d5a20;
  background: #eef6e4;
}
.zone-draw-icon-btn.zone-draw-confirm:hover {
  background: #dff0c8;
  border-color: #5a7a30;
}
.zone-draw-icon-btn.zone-draw-confirm[hidden] {
  display: none !important;
}
.zone-draw-icon-btn.zone-draw-cancel {
  border-color: #c07050;
  color: #8a4030;
  background: #fdf0eb;
}
.zone-draw-icon-btn.zone-draw-cancel:hover {
  background: #f8ddd4;
  border-color: #a05038;
}
.zone-draw-icon-btn.zone-draw-cancel[hidden] {
  display: none !important;
}
/* First-outline post-process: save after ✓ review (same chip family as confirm) */
.zone-draw-icon-btn.zone-draw-finish-icon {
  border-color: #6b8f3c;
  color: #fff;
  background: var(--btn-primary-bg, #456311);
}
.zone-draw-icon-btn.zone-draw-finish-icon:hover {
  background: var(--btn-primary-hover, #3a5410);
  border-color: var(--btn-primary-hover, #3a5410);
}
.zone-draw-icon-btn.zone-draw-finish-icon[hidden] {
  display: none !important;
}
.zone-draw-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 1px solid #aaa;
  border-radius: 8px;
  background: #f4f4f4;
  color: #333;
  cursor: pointer;
}
.zone-draw-icon-btn .material-icons {
  font-size: 1.25em;
}
.zone-draw-icon-btn:hover {
  background: #e8e8e8;
}
.zone-draw-dirty {
  margin-left: auto;
  font-size: 0.85em;
  font-weight: 700;
  color: #c45c12;
  background: #fff3e6;
  border: 1px solid #e67e22;
  border-radius: 4px;
  padding: 0.2em 0.55em;
}
.zone-draw-status {
  margin: 0;
  /* Reserve two lines so tool vs dirty vs drag hints never reflow the map. */
  min-height: calc(2 * 1.35em);
  line-height: 1.35;
  font-size: 0.9em;
}
/* PR4: sat vs blank canvas chrome */
.zone-draw-mapmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.75em;
  min-height: 1.4em;
}
.zone-draw-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.82em;
  font-weight: 600;
  padding: 0.15em 0.55em;
  border-radius: 999px;
  border: 1px solid #b0b8a0;
  background: #f0f3ea;
  color: #3a4a2a;
}
.zone-draw-chip .material-icons {
  font-size: 1.1em;
}
.zone-draw-chip-sat {
  border-color: #6a8faf;
  background: #e8f1f8;
  color: #1e4a6e;
}
.zone-draw-chip-blank {
  border-color: #b5a890;
  background: #f3efe6;
  color: #5a4a30;
}
.zone-draw-chip-gps {
  border-color: #5a9a6a;
  background: #e8f5eb;
  color: #1e5a2e;
}
.zone-draw-chip-nogps {
  border-color: #c09060;
  background: #faf0e6;
  color: #6a4010;
}
.zone-draw-sat-link {
  font-size: 0.88em;
  font-weight: 600;
  color: var(--brand-olive);
  text-decoration: none;
}
.zone-draw-sat-link:hover {
  text-decoration: underline;
}
.zone-draw-sat-link-primary {
  padding: 0.2em 0.55em;
  border-radius: 4px;
  background: var(--btn-primary-bg);
  color: #fff !important;
}
.zone-draw-sat-link-primary:hover {
  background: var(--btn-primary-hover);
  filter: none;
  text-decoration: none;
}
.zone-draw-sat-blocked {
  font-size: 0.88em;
  opacity: 0.45;
  text-decoration: line-through;
  cursor: not-allowed;
}
/* iOS: reduce accidental page zoom / text select while editing the map */
.zone-draw-shell.mode-edit .zone-draw-host,
.zone-draw-shell.mode-edit .zone-draw-host svg {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.zone-draw-host {
  position: relative;
  /* Field-like: thin frame only — no fat letterbox window */
  border: 1px solid rgba(90, 110, 70, 0.35);
  border-radius: 3px;
  background: transparent;
  padding: 0;
  /* Clip sat/SVG so large orthophotos cannot spill over adjacent form panels */
  overflow: hidden;
  max-width: 100%;
  min-height: 0;
  /* Column scroll wins over map pan/zoom — map is fixed framing */
  touch-action: pan-y;
  box-sizing: border-box;
}
.zone-draw-host > svg,
.zone-draw-host svg.zone-map,
.zone-draw-host > table {
  max-width: 100%;
}
.zone-draw-shell.mode-edit .zone-draw-host {
  /* Allow page scroll; only lock during active draw/move (JS sets none briefly) */
  touch-action: pan-y;
}
/* Arc tool: lock the map surface before pointerdown so the map column
 * (overflow-y:auto) cannot start a pan-y that races the arc drag.
 * Specificity must beat #zone_manager .zone-draw-host svg { touch-action: pan-y }. */
#zone_manager .zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host,
#zone_manager .zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host a,
#zone_manager .zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host svg,
.zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host,
.zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host a,
.zone-draw-shell[data-zone-tool='zone_arc'] .zone-draw-host svg {
  touch-action: none;
}
.zone-draw-host-blank {
  /* Light paper only inside SVG zone fill — host stays transparent */
  background: transparent;
  border-color: rgba(120, 110, 90, 0.4);
}
.zone-draw-host-sat {
  /* No black strip: letterboxing would show page bg, not a dark matte */
  background: transparent;
  border-color: rgba(90, 110, 70, 0.4);
}
.zone-map-focus-title {
  margin: 0 0 0.35em;
  font-size: 1.05em;
  font-weight: 600;
  color: #2a3320;
}
.zone-draw-empty {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  font-size: 0.95em;
  padding: 1.5em;
  text-align: center;
}
/* Draft strokes: slightly stronger on sat imagery */
.zone-draw-shell.has-sat-bg .zone-draw-draft-shape {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}
/* Browse: zone map links work */
.zone-draw-shell.mode-browse .zone-draw-host a {
  cursor: pointer;
  pointer-events: auto;
}
.zone-draw-shell.mode-edit .zone-draw-host {
  cursor: crosshair;
  border-color: #6b8f3c;
}
/* Edit: disable map <a> hit targets so move/rotate use plane hit-tests only.
 * Packed planches (e.g. zone 2712 under a short mother) otherwise steal gestures. */
.zone-draw-shell.mode-edit .zone-draw-host a {
  cursor: crosshair;
  pointer-events: none;
}
.zone-draw-shell.is-dirty .zone-draw-host {
  border-color: #e67e22;
  box-shadow: 0 0 0 1px rgba(230, 126, 34, 0.25);
}
/* Actions directly under map (form="zone_form") */
.zone-map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  margin-top: 0.35em;
  padding: 0.45em 0.15em 0.15em;
  border-top: 1px solid #c5d0b8;
}
.zone-map-actions .zone-act {
  font-weight: 600;
  padding: 0.45em 0.9em;
  min-height: 2.5em;
}
.zone-map-actions .zone-act-update {
  background: var(--btn-primary-bg);
  border-color: var(--brand-olive-hover);
  color: #fff;
}
.zone-map-actions .zone-act-update:hover {
  background: var(--btn-primary-hover);
}
.zone-map-actions .zone-act-delete {
  background: var(--btn-danger-bg) !important;
  color: var(--btn-danger-fg) !important;
}
.zone-map-actions .zone-act-delete:hover {
  background: var(--btn-danger-hover) !important;
}
@media (max-width: 720px) {
  .zone-mode-label {
    /* icons carry meaning; labels optional on narrow screens */
    font-size: 0.85em;
  }
  .zone-map-actions .zone-act {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Zone satellite calibration wizard */
.zsat-launch {
  display: inline-block;
  margin-top: 0.5em;
  font-weight: 600;
  color: var(--brand-olive);
}
.zsat-launch a {
  color: inherit;
}
.org-admin-logo-preview {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.org-admin-address {
  margin-top: 1em;
}
.org-admin-delete {
  margin-top: 1.5em;
  border-color: var(--surface-error-border);
  background: var(--surface-error-bg);
}
.org-admin-delete .ua-submit-danger {
  margin-top: 0.5em;
}
/* Contain Leaflet so tiles/controls never spill into following form fields */
.zarea-map-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  margin: 0.5em 0;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  z-index: 0;
  box-shadow: 0 1px 3px rgba(60, 80, 40, 0.06);
}
.zarea-map {
  width: 100%;
  height: min(50vh, 420px);
  max-height: 420px;
  margin: 0;
  border: 0;
  border-radius: 0;
  z-index: 0;
}
.zarea-map .leaflet-container,
.zarea-map.leaflet-container {
  width: 100% !important;
  height: 100% !important;
  max-height: inherit;
  font: inherit;
  z-index: 0 !important;
}
.zarea-search-row {
  margin: 0.35em 0 0.75em;
}
.zarea-search-btn {
  /* colours: global tool role */
  font-weight: 600;
  padding: 0.4em 0.9em;
  cursor: pointer;
}
.org-admin-address .pot-panel-body {
  overflow: hidden;
  max-width: 100%;
}
.zsat-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  margin: 0.75em 0 1em;
}
.zsat-step {
  opacity: 0.55;
  font-size: 0.95em;
}
.zsat-step.is-active {
  opacity: 1;
  font-weight: 700;
  color: var(--brand-olive);
}
.zsat-map {
  width: 100%;
  height: min(55vh, 480px);
  margin: 0.5em 0 0.75em;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  z-index: 0;
}
#zone_sat_wizard,
#zone_sat_wizard .grid_main,
#zone_sat_wizard .zsat-main-panel {
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.zsat-panel-body {
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}
.zsat-svg-host,
.zsat-preview {
  margin: 0.5em 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.zsat-preview-stage {
  position: relative;
  display: block;
  width: 100%;
  max-width: min(100%, 640px);
  max-height: min(55vh, 480px);
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid #666;
  border-radius: 4px;
  line-height: 0;
  /* metric 1:1 display: image natural aspect, not squeezed to column */
  text-align: center;
  isolation: isolate;
  z-index: 0;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.zsat-sat-img {
  display: inline-block;
  max-width: 100%;
  max-height: min(55vh, 480px);
  width: auto;
  height: auto;
  /* preserve pixel aspect from ENU export (≈ local w:h) */
  object-fit: contain;
  vertical-align: top;
}
.zsat-overlay-svg {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
}
/* Tune controls: label | full-width slider | value (no wrap mess) */
.zsat-tune-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55em 1em;
  margin: 0.65em 0 0.9em;
  max-width: min(100%, 36rem);
  box-sizing: border-box;
}
@media (min-width: 720px) {
  .zsat-tune-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.zsat-tune-item {
  display: grid;
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4em 0.55em;
  min-width: 0;
  max-width: 100%;
}
/* display:grid above overrides the UA [hidden] rule — force hide for upload-only controls */
.zsat-tune-item[hidden] {
  display: none !important;
}
.zsat-tune-item.zsat-tune-angle {
  grid-template-columns: 5.25rem minmax(0, 1fr) auto;
}
.zsat-tune-label {
  font-size: 0.9em;
  font-weight: 600;
  color: #3a4a30;
  white-space: nowrap;
}
.zsat-tune-slider {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}
.zsat-tune-value {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  min-width: 3.2em;
  justify-content: flex-end;
}
.zsat-tune-unit {
  opacity: 0.75;
}
.zsat-angle-num {
  width: 4.5em;
  max-width: 5em;
  box-sizing: border-box;
}
/* legacy class kept for safety */
.zsat-tune-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 1.5em;
  margin: 0.5em 0 0.75em;
}
.zsat-tune-row label {
  display: flex;
  align-items: center;
  gap: 0.4em;
  flex-wrap: wrap;
}
.zsat-reshape {
  margin: 0.75em 0;
}
.zsat-save {
  font-weight: 600;
}
button.zsat-save,
#zsat_to_step2,
#zsat_to_step3,
#zsat_preview_btn {
  margin-top: 0.35em;
}
/* ========================================================================
   Area canvas / map background (N0f) — STYLING §0–4 farm tokens
   Surfaces: onboard canvas, zone_new top canvas, edit_zone_sat, first outline
   ======================================================================== */
.area-canvas-body {
  max-width: 40rem;
}
/* Outline step: full column width so map L&F matches zone manager */
.area-canvas-outline-body {
  max-width: none;
}
.area-canvas-lead {
  margin: 0 0 var(--space-2, 0.5rem);
  line-height: 1.45;
  color: var(--surface-title, #2a3520);
  font-size: 1.02rem;
}
.area-canvas-note {
  margin: 0 0 var(--space-4, 1rem);
  padding: 0.55em 0.75em;
  border-left: 3px solid var(--brand-olive-soft, #6b8f3c);
  background: var(--surface-msg-bg, #f0f4ea);
  border-radius: 0 var(--surface-panel-radius, 6px) var(--surface-panel-radius, 6px) 0;
  color: var(--surface-text-muted, #4a5540);
  font-size: 0.92rem;
  line-height: 1.4;
}
.area-canvas-sources {
  display: grid;
  gap: var(--space-3, 0.75rem);
  margin: 0 0 var(--space-4, 1rem);
}
.area-canvas-card {
  margin: 0;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem) var(--space-4, 1rem);
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: var(--surface-panel-radius, 6px);
  background: var(--surface-panel-bg, #f7f9f3);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(60, 80, 40, 0.06));
  box-sizing: border-box;
}
.area-canvas-card.is-disabled {
  opacity: 0.72;
  background: var(--surface-panel-bg-soft, #eef1e8);
}
.area-canvas-card-head {
  display: flex;
  align-items: center;
  gap: 0.55em;
  margin: 0 0 0.45em;
}
.area-canvas-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  background: var(--brand-olive, #456311);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.area-canvas-card.is-disabled .area-canvas-card-badge {
  background: var(--surface-text-muted, #6a7560);
}
.area-canvas-card-title {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--surface-title, #2a3520);
  line-height: 1.25;
}
.area-canvas-card-help,
.area-canvas-card-meta {
  margin: 0 0 0.65em;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--surface-text-muted, #4a5540);
}
.area-canvas-card-meta {
  font-size: 0.88rem;
  opacity: 0.95;
}
.area-canvas-card-warn {
  margin: 0 0 0.65em;
  padding: 0.4em 0.55em;
  font-size: 0.88rem;
  color: var(--brand-danger, #b83e2d);
  background: rgba(184, 62, 45, 0.08);
  border-radius: 4px;
}
.area-canvas-form {
  margin-top: 0.35em;
}
.area-canvas-dims {
  margin-bottom: 0.65em;
}
.area-canvas-dim input,
.area-canvas-dim select {
  padding: 0.4em 0.5em;
  border: 1px solid var(--form-border, #b8c4a8);
  border-radius: 4px;
  background: var(--surface-input-bg, #fff);
}
.area-canvas-dim input:focus-visible,
.area-canvas-dim select:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: 1px;
}
/* Draft contour must paint over sat (handles alone are not enough) */
.zone-draw-shell #zone_draw_draft {
  pointer-events: none;
}
.zone-draw-shell #zone_draw_draft .zone-draw-draft-shape {
  opacity: 1 !important;
}
.area-canvas-preview {
  min-height: 1.25em;
  margin: 0 0 0.5em;
}
.area-canvas-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--surface-divider, #d8e0cc);
}
.area-canvas-actions .btn-primary,
.area-canvas-actions .btn-quiet,
.area-canvas-actions .btn-tool,
.area-canvas-card .btn-primary {
  min-height: var(--touch-min, 44px);
  padding: 0.5em 1.1em;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.area-canvas-status {
  margin: 0.35em 0 0.65em;
  font-size: 0.9rem;
  color: var(--surface-text-muted, #4a5540);
  min-height: 1.25em;
}

/* Sat wizard shell */
.area-canvas-sat-inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.5em 0 1.5em;
}
.area-canvas-sat-hero {
  margin-bottom: var(--space-3, 0.75rem);
}
.area-canvas-sat-title {
  margin: 0;
  font-size: 1.45rem;
  color: var(--surface-title, #2a3520);
  font-weight: 700;
}
.area-canvas-sat-sub {
  margin: 0.2em 0 0.5em;
  font-size: 1rem;
  font-weight: 600;
  color: var(--brand-olive, #456311);
}
.area-canvas-panel.pot-panel {
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: var(--surface-panel-radius, 6px);
  background: var(--surface-panel-bg, #f7f9f3);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(60, 80, 40, 0.06));
}
.area-canvas-panel .pot-panel-title {
  color: var(--surface-title, #2a3520);
  border-bottom: 1px solid var(--surface-divider, #d8e0cc);
}
.zsat-actions.area-canvas-actions {
  border-top: 1px solid var(--surface-divider, #d8e0cc);
  margin-top: 1em;
  padding-top: 0.85em;
}
.area-canvas-file-label {
  display: block;
  font-size: 0.92rem;
  color: var(--surface-text-muted, #4a5540);
  line-height: 1.4;
}
.area-canvas-file {
  display: block;
  margin-top: 0.45em;
  max-width: 100%;
}
.area-canvas-upload {
  margin: 0.75em 0;
  padding: 0.65em 0.75em;
  border: 1px dashed var(--surface-panel-border, #c5d0b8);
  border-radius: var(--surface-panel-radius, 6px);
  background: var(--surface-input-bg, #fff);
}

/* Static sat preview (no pan/zoom); upload tools */
.zsat-preview.zsat-tool-active {
  cursor: crosshair;
}
.zsat-preview.zsat-tool-active .zsat-overlay-svg {
  pointer-events: auto;
}
.zsat-frame-wh {
  margin: 0.5em 0 0.75em;
  max-width: min(100%, 36rem);
}
.zsat-frame-wh[hidden],
.zsat-upload-tools[hidden],
.zsat-segment-panel[hidden],
.zsat-gps-panel[hidden] {
  display: none !important;
}
.zsat-frame-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;
  align-items: center;
}
.zsat-frame-row input[type="number"] {
  width: 6rem;
  max-width: 30vw;
}
.zsat-upload-tools {
  margin: 0.5em 0 0.75em;
  padding: 0.55em 0.7em;
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: var(--surface-panel-radius, 6px);
  background: var(--surface-panel-bg-soft, #eef1e8);
  max-width: min(100%, 36rem);
}
.zsat-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 0.6em;
  margin-bottom: 0.35em;
}
.zsat-segment-panel,
.zsat-gps-panel {
  margin-top: 0.45em;
}
.zsat-segment-panel input[type="number"],
.zsat-gps-panel input[type="number"] {
  width: 7rem;
  max-width: 35vw;
  margin-right: 0.35em;
  min-height: 2.25rem;
}
.zsat-preview-stage {
  border-radius: var(--surface-panel-radius, 6px);
  border-color: var(--surface-panel-border, #666);
}
/* Technical geom fields for zone_draw.js — hide from operators */
.zone-draw-geom-fields,
.zone-wizard-shell .zone-wizard-geom-fields {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* Phase D: hide server frame only (never the draft layer).
 * DrawZone wraps the map SVG in <a>, so broad "a polygon" selectors also hit
 * #zone_draw_draft shapes (live fill + dashed stroke). Exclude draft class. */
.zone-draw-shell.empty-top-draw .zone-draw-host a polygon:not(.zone-draw-draft-shape),
.zone-draw-shell.empty-top-draw .zone-draw-host a rect:not(.zone-draw-draft-shape) {
  fill: none !important;
  stroke: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
/* Draft contour: force visible over sat (handles alone are not enough) */
.zone-draw-shell.empty-top-draw #zone_draw_draft {
  opacity: 1 !important;
}
.zone-draw-shell.empty-top-draw #zone_draw_draft .zone-draw-draft-shape {
  opacity: 1 !important;
  /* fill + stroke + dash come from zone_draw.js styleOutline (inline attrs) */
}
.zone-draw-shell.empty-top-draw .zone-planting-dir {
  display: none;
}
/* Swiss first-setup: never show file upload chrome (path is orthophoto-only) */
.zsat-swiss-flow .zsat-upload-row,
.zsat-swiss-flow .area-canvas-upload,
.zsat-swiss-flow .area-canvas-file-label,
.zsat-swiss-flow .area-canvas-file,
.zsat-swiss-flow #zsat_upload,
.zsat-swiss-flow #zsat_upload_tools,
.zsat-swiss-flow .zsat-upload-tools {
  display: none !important;
}
/* Feedback variants used on canvas flows */
.ref-msg-ok {
  border-left-color: var(--brand-olive-soft, #6b8f3c);
  background: var(--surface-msg-bg, #f0f4ea);
}
.ref-msg-error {
  border-left-color: var(--brand-danger, #b83e2d);
  color: var(--brand-danger, #b83e2d);
}
/* Shared multi-lang map editor (crops / shop / zone tags) */
.i18n-map {
  margin: 0.6em 0 1em;
  padding: 0.55em 0.65em;
  border: 1px solid var(--surface-panel-border-soft);
  border-radius: var(--surface-panel-radius);
  background: var(--surface-panel-bg-soft);
}
.i18n-map-list {
  list-style: none;
  margin: 0.35em 0 0.6em;
  padding: 0;
  max-height: 12em;
  overflow: auto;
  border: 1px solid var(--surface-divider);
  border-radius: var(--surface-input-radius);
  background: var(--surface-input-bg);
}
.i18n-map-list li {
  display: flex;
  gap: 0.5em;
  align-items: baseline;
  padding: 0.35em 0.5em;
  cursor: pointer;
  border-bottom: 1px solid #eef2ea;
  font-size: 0.92em;
}
.i18n-map-list li:last-child { border-bottom: 0; }
.i18n-map-list li:hover,
.i18n-map-list li.is-active { background: #e8f0df; }
.i18n-map-list .i18n-code {
  font-weight: 700;
  min-width: 2.4em;
  color: var(--brand-olive);
  text-transform: uppercase;
}
.i18n-map-list .i18n-empty {
  opacity: 0.55;
  font-style: italic;
  padding: 0.45em 0.5em;
  cursor: default;
}
.i18n-map-edit label { margin-top: 0.35em; }
.i18n-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  margin-top: 0.45em;
}
.i18n-map-status { min-height: 1.2em; }
.i18n-map-value {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* ---- New zone wizard (.zone-wizard-shell) — UI-PR4; does not alter Field/zone manager gestures ---- */
.zone-wizard-shell {
  width: 100%;
  max-width: min(960px, 100%);
  margin: 0 auto;
  padding: 0.5rem 0.75rem 2rem;
  box-sizing: border-box;
  overflow-x: hidden;
}
.zone-wizard-shell input[type="text"],
.zone-wizard-shell input[type="number"],
.zone-wizard-shell select,
.zone-wizard-shell textarea {
  max-width: 100%;
  box-sizing: border-box;
}
.zone-wizard-hero { margin-bottom: 0.75rem; }
.zone-wizard-title {
  margin: 0 0 0.35rem;
  font-size: 1.45rem;
  color: var(--surface-title);
}
.zone-wizard-lead {
  margin: 0;
  color: var(--surface-text-muted);
  line-height: 1.45;
  max-width: 40em;
}
.zone-wizard-progress {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  margin: 0 0 1rem;
  padding: 0.45rem 0.55rem;
  background: var(--surface-panel-bg);
  border: 1px solid var(--surface-divider);
  border-radius: var(--surface-panel-radius);
  box-sizing: border-box;
}
.zone-wizard-progress-item {
  font-size: 0.9rem;
  color: var(--surface-text-muted);
}
.zone-wizard-progress-item.is-current {
  font-weight: 700;
  color: var(--surface-title);
}
.zone-wizard-progress-item.is-done:not(.is-current) a,
.zone-wizard-progress-item.is-done:not(.is-current) .zone-wizard-progress-btn {
  color: var(--brand-olive);
}
.zone-wizard-step-num {
  display: inline-block;
  min-width: 1.25em;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand-olive);
}
.zone-wizard-progress-form { display: inline; margin: 0; padding: 0; }
.zone-wizard-progress-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  font-weight: 600;
}
.zone-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 1rem;
}
.zone-wizard-actions-stack {
  flex-direction: column;
  align-items: stretch;
  max-width: 22rem;
}
.zone-wizard-btn {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--surface-panel-radius);
  border: 1px solid var(--btn-quiet-border);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  background: var(--btn-quiet-bg);
  color: var(--btn-quiet-fg) !important;
  text-align: center;
  box-sizing: border-box;
  min-height: 2.4rem;
  line-height: 1.25;
}
.zone-wizard-btn-primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--btn-primary-fg) !important;
}
.zone-wizard-btn-primary:hover {
  background: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}
.zone-wizard-btn-secondary:hover,
.zone-wizard-btn-back:hover {
  background: var(--btn-quiet-hover-bg);
}
.zone-wizard-path-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.75rem 0;
}
@media (max-width: 640px) {
  .zone-wizard-path-cards { grid-template-columns: 1fr; }
}
.zone-wizard-path-card {
  display: block;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  padding: 0.8rem 0.9rem;
  cursor: pointer;
  background: var(--surface-input-bg);
  box-shadow: 0 1px 3px rgba(60, 80, 40, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}
.zone-wizard-path-card:hover {
  border-color: var(--brand-olive-soft);
  background: var(--surface-panel-bg-soft);
}
.zone-wizard-path-card.is-selected,
.zone-wizard-path-card:has(input:checked) {
  border-color: var(--brand-olive);
  background: var(--surface-msg-bg);
  box-shadow: 0 0 0 1px var(--brand-olive-soft);
}
.zone-wizard-path-card strong {
  display: block;
  margin: 0.25rem 0;
  color: var(--surface-title);
}
.zone-wizard-path-card .ref-hint { display: block; margin: 0.25rem 0 0; }
.zone-wizard-layout-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.75rem;
  align-items: center;
  max-width: 22rem;
  margin: 0.75rem 0;
}
.zone-wizard-layout-grid label {
  font-size: var(--form-label-size);
  color: var(--form-label-color);
  font-weight: 500;
}
.zone-wizard-layout-grid input[type='number'],
.zone-wizard-layout-grid input[type='text'],
.zone-wizard-layout-grid select {
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  background: var(--surface-input-bg);
  font: inherit;
  box-sizing: border-box;
  max-width: 100%;
}
.zone-wizard-layout-grid input:focus,
.zone-wizard-layout-grid select:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}
.zone-wizard-draft-warn {
  color: #8a5a20;
  font-weight: 600;
  background: var(--surface-warn-bg);
  border: 1px solid var(--surface-warn-border);
  border-left: 4px solid #c9a227;
  border-radius: var(--surface-input-radius);
  padding: 0.45em 0.75em;
  display: inline-block;
  margin: 0.35em 0;
}
/* Nested child draw (place / move) still uses wizard shell — not first outline */
.zone-wizard-draw:not(.first-outline-draw) {
  margin: 0.75em 0 1em;
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  padding: 0.4em;
  background: var(--surface-panel-bg-soft);
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(60, 80, 40, 0.06);
}
.zone-wizard-draw:not(.first-outline-draw) .zone-draw-host {
  min-height: 280px;
  max-height: min(70vh, 640px);
}
.zone-wizard-form .zone-wizard-actions { margin-top: 1rem; }
.zone-wizard-form .pot-panel {
  margin-top: 0.75rem;
}
.zone-manager-wizard-link {
  margin: 0.25rem 0 0.75rem;
}
.zone-manager-wizard-link a {
  color: var(--brand-olive);
  font-weight: 600;
  text-decoration: none;
}
.zone-manager-wizard-link a:hover {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Root zone transfer (org admin) — UI-PR4; do not affect Field map */
.zone-transfer-panel {
  margin-top: 1rem;
  border-top: 1px solid var(--surface-divider);
  padding-top: 0.75rem;
}
.zone-transfer-panel .zone-transfer-msg {
  background: var(--surface-warn-bg);
  border: 1px solid var(--surface-warn-border);
  border-left: 4px solid #c9a227;
  border-radius: var(--surface-input-radius);
  padding: 0.55rem 0.85rem;
  margin: 0.5rem 0;
  font-weight: 600;
  color: #5a4a18;
  box-shadow: 0 1px 2px rgba(60, 80, 40, 0.06);
}
.zone-transfer-panel .pot-panel-title {
  font-size: 0.95rem;
  opacity: 0.95;
  color: var(--surface-title);
}
.zone-transfer-panel textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  background: var(--surface-input-bg);
  font: inherit;
}
.zone-transfer-panel textarea:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}
.zone-transfer-panel button {
  margin-top: 0.5rem;
}
.zone-transfer-page .zone-transfer-summary,
.zone-transfer-page .zone-transfer-confirm {
  max-width: 36rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface-panel-bg);
  border: 1px solid var(--surface-panel-border);
  border-radius: var(--surface-panel-radius);
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(60, 80, 40, 0.06);
}
.zone-transfer-page h2,
.zone-transfer-page h3 {
  color: var(--surface-title);
}
.zone-transfer-form .zone-form-row {
  margin-bottom: 0.75rem;
}
.zone-transfer-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--form-label-size);
  color: var(--form-label-color);
  font-weight: 500;
}
.zone-transfer-form input[type="password"],
.zone-transfer-form input[type="text"],
.zone-transfer-form input[type="email"] {
  width: 100%;
  max-width: 24rem;
  box-sizing: border-box;
  border: 1px solid var(--surface-input-border);
  border-radius: var(--surface-input-radius);
  padding: var(--surface-input-pad-y) var(--surface-input-pad-x);
  background: var(--surface-input-bg);
  font: inherit;
}
.zone-transfer-form input:focus {
  outline: 2px solid var(--surface-focus-ring);
  outline-offset: 1px;
  border-color: var(--surface-focus-border);
}
.zone-transfer-form .zone-form-actions-inner,
.zone-transfer-pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.75rem;
}

/* --- Variety picker: plant_co multi-select (scoped) --- */
#var_picker .var-pick-ms {
  position: relative;
  display: inline-block;
  min-width: 12rem;
  max-width: 100%;
  vertical-align: middle;
}
#var_picker .var-pick-ms-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  min-height: 2rem;
  padding: 0.25em 0.55em;
  font: inherit;
  font-size: var(--type-sm, 1rem);
  color: var(--text-color, #202020);
  background: #fff;
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
}
#var_picker .var-pick-ms-toggle:hover {
  border-color: var(--brand-olive-soft, #6b8f3c);
}
#var_picker .var-pick-ms-toggle:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: 2px;
}
#var_picker .var-pick-ms-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#var_picker .var-pick-ms-caret {
  flex-shrink: 0;
  opacity: 0.65;
  font-size: 0.75em;
}
#var_picker .var-pick-ms-panel {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  z-index: var(--z-popover, 1200);
  min-width: 100%;
  max-width: min(20rem, 90vw);
  max-height: 14rem;
  overflow-y: auto;
  padding: var(--space-2, 0.5rem);
  background: #fff;
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: 4px;
  box-shadow: var(--shadow-md, 0 2px 8px rgba(60, 90, 40, 0.1));
}
#var_picker .var-pick-ms-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  padding-bottom: var(--space-2, 0.5rem);
  border-bottom: 1px solid var(--surface-divider, #d8e0cc);
}
#var_picker .var-pick-ms-action {
  flex: 1;
  min-height: 1.75rem;
  padding: 0.2em 0.5em;
  font: inherit;
  font-size: 0.9em;
  color: var(--brand-olive, #456311);
  background: var(--surface-panel-bg, #f7f9f3);
  border: 1px solid var(--surface-panel-border, #c5d0b8);
  border-radius: 3px;
  cursor: pointer;
}
#var_picker .var-pick-ms-action:hover {
  background: #eef3e6;
}
#var_picker .var-pick-ms-action:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: 1px;
}
#var_picker .var-pick-ms-opt {
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28em 0.15em;
  font-size: 0.95em;
  cursor: pointer;
  user-select: none;
}
#var_picker .var-pick-ms-opt:hover {
  background: #f3f7ec;
}
#var_picker .var-pick-ms-opt input {
  margin: 0;
  flex-shrink: 0;
}
#var_picker .var-pick-ms-other {
  margin-top: var(--space-2, 0.5rem);
  padding-top: var(--space-2, 0.5rem);
  border-top: 1px solid var(--surface-divider, #d8e0cc);
}
#var_picker .var-pick-ms-other-sum {
  list-style: none;
  cursor: pointer;
  font-size: 0.9em;
  color: var(--brand-olive, #456311);
  padding: 0.2em 0.15em;
  user-select: none;
}
#var_picker .var-pick-ms-other-sum::-webkit-details-marker {
  display: none;
}
#var_picker .var-pick-ms-other-sum::before {
  content: '▸ ';
  opacity: 0.7;
}
#var_picker .var-pick-ms-other[open] > .var-pick-ms-other-sum::before {
  content: '▾ ';
}
#var_picker .var-pick-ms-other-sum:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: 1px;
}
.org-admin-pref-suppliers {
  margin-top: 1em;
}
.org-admin-pref-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.org-admin-pref-item {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.28em 0.1em;
  cursor: pointer;
}
.org-admin-pref-item.is-own {
  font-weight: 600;
  cursor: default;
}
.org-admin-pref-src {
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.7;
}
#var_picker #search {
  max-width: 100%;
}

/* OAuth consent / connected-apps (farm chrome; do not touch Field/POS) */
.oauth-consent .oauth-scopes,
.ua-panel-oauth .oauth-scopes {
  margin: var(--space-3, 0.75rem) 0;
  border: 1px solid var(--surface-panel-border, #d5ddc8);
  border-radius: 6px;
  padding: var(--space-3, 0.75rem);
}
.oauth-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-4, 1rem);
}

.oauth-pat-reveal {
  margin: var(--space-3, 0.75rem) 0 var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  background: var(--surface-panel-bg, #f4f7ee);
  border: 1px solid var(--brand-olive, #456311);
  border-radius: 6px;
}
.oauth-pat-reveal-name {
  margin: 0 0 0.4rem;
  font-weight: 600;
}
.oauth-pat-reveal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: stretch;
}
.oauth-pat-secret {
  flex: 1 1 16em;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05em;
  letter-spacing: 0.02em;
  word-break: break-all;
  padding: 0.55em 0.7em;
  background: #fff;
  border: 1px solid var(--surface-input-border, #c5cfc0);
  border-radius: 4px;
  color: var(--text-color, #222);
}
.oauth-pat-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: 0 0 auto;
  min-height: var(--touch-min, 44px);
}
.oauth-pat-copy .material-icons {
  font-size: 1.2em;
}

/* Plant catalog editor (kind → family → crop → cultivar + listings) */
.catalog-edit-shell {
  grid-area: grid_main;
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--background-light, aliceblue);
}
.catalog-edit-left {
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-right: 1px solid var(--surface-panel-border, #d5ddc8);
  background: var(--surface-panel-bg, #f4f7ee);
}
.catalog-edit-left h2 {
  margin: 0 0 var(--space-2, 0.5rem);
}
.catalog-edit-left > .ref-msg,
.catalog-edit-left > .catalog-back {
  margin-bottom: var(--space-2, 0.5rem);
}
.catalog-edit-picker {
  overflow: visible;
  margin: var(--space-2, 0.5rem) 0;
}
.catalog-edit-levels {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-2, 0.5rem) 0;
  background: #fff;
  border: 1px solid var(--surface-panel-border, #d5ddc8);
}
.catalog-edit-levels th,
.catalog-edit-levels td {
  padding: var(--space-2, 0.5rem);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface-panel-border, #d5ddc8);
}
.catalog-edit-levels thead th {
  font-size: 0.85em;
  font-weight: 600;
}
.catalog-edit-levels tbody th[scope="row"] {
  font-weight: 600;
  width: 40%;
}
.catalog-edit-level-val {
  display: block;
  font-weight: 400;
  color: var(--text-color, #202020);
  overflow-wrap: anywhere;
}
.catalog-edit-levels td .custom-button {
  width: 100%;
  min-height: var(--touch-min, 44px);
}
.catalog-edit-levels tbody tr:last-child th,
.catalog-edit-levels tbody tr:last-child td {
  border-bottom: 0;
}
.catalog-edit-picker #var_picker {
  width: 100%;
  table-layout: auto;
}
.catalog-edit-picker #var_picker td {
  vertical-align: middle;
}
.catalog-edit-picker #var_picker td:first-child {
  width: 6.5rem;
  padding-right: var(--space-2, 0.5rem);
}
.catalog-edit-picker #var_picker select,
.catalog-edit-picker #var_picker input:not([type="checkbox"]):not([type="hidden"]):not([type="radio"]) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Hidden picker methods (VarietyPicker::hideRows) — keep in DOM for cascade JS */
#var_picker tr[data-var-pick-row][hidden] {
  display: none !important;
}
.catalog-edit-list {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 8rem;
  overflow: auto;
  margin: 0 calc(-1 * var(--space-4, 1rem));
  padding: 0;
  border-top: 1px solid var(--surface-panel-border, #d5ddc8);
}
.catalog-edit-list-bar,
.catalog-edit-list > .ref-hint {
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem) 0;
}
.catalog-edit-form {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}
.catalog-edit-list-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
}
.catalog-edit-list-bar h3 {
  margin: 0;
}
.catalog-edit-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.catalog-edit-item-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  min-height: var(--touch-min, 44px);
  padding: 0.4rem 0.6rem;
  border: 0;
  border-bottom: 1px solid var(--surface-panel-border, #d5ddc8);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.catalog-edit-item-btn:hover {
  background: rgba(69, 99, 17, 0.08);
}
.catalog-edit-item-btn:focus-visible {
  outline: 2px solid var(--brand-olive-soft, #6b8f3c);
  outline-offset: -2px;
}
.catalog-edit-item.is-active .catalog-edit-item-btn {
  background: rgba(69, 99, 17, 0.14);
  font-weight: 600;
}
.catalog-edit-item.is-shared .catalog-edit-item-label {
  color: var(--text-color, #202020);
}
.catalog-edit-item-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.catalog-edit-badge {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.1em 0.45em;
  border-radius: 999px;
  border: 1px solid var(--surface-panel-border, #d5ddc8);
}
.catalog-edit-badge--owned {
  background: var(--brand-olive, #456311);
  color: #fff;
  border-color: var(--brand-olive, #456311);
}
.catalog-edit-badge--shared {
  background: #fff;
  color: var(--brand-olive, #456311);
}
.catalog-edit-form .ref-form.is-readonly input,
.catalog-edit-form .ref-form.is-readonly select,
.catalog-edit-form .ref-form.is-readonly textarea {
  background: #f3f3f3;
}
.catalog-offer-panel {
  margin-top: var(--space-4, 1rem);
}
.catalog-offer-mini {
  margin: 0;
  padding: 0;
}
.catalog-offer-mini #catalog_offer_pick {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: var(--space-3, 0.75rem);
}
.catalog-offer-badge {
  font-size: 0.85em;
  font-weight: 600;
  margin: 0 0 var(--space-2, 0.5rem);
}
.catalog-offer-add-title {
  margin: var(--space-3, 0.75rem) 0 var(--space-2, 0.5rem);
}
.catalog-edit-new-var-wrap {
  margin: var(--space-4, 1rem) 0 0;
}
.catalog-edit-create-var {
  margin: 0 0 var(--space-2, 0.5rem);
}
.catalog-edit-form-tools {
  margin: 0 0 var(--space-3, 0.75rem);
}
/* Account home-screen install — scoped to .ua-panel-pwa; Field / POS untouched */
.ua-panel-pwa .pwa-install-steps {
  margin: 0 0 0.75em;
  padding-left: 1.25em;
  line-height: 1.45;
}

.ua-panel-pwa .pwa-install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.75em;
  margin-top: 0.75em;
  align-items: center;
}

.ua-panel-pwa .pwa-install-actions .btn-primary,
.ua-panel-pwa .pwa-install-actions .btn-quiet {
  min-height: var(--touch-min, 44px);
}

@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .pwa-install-card {
    display: none !important;
  }
}

@media screen and (max-width: 800px) {
  .catalog-edit-shell {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }
  .catalog-edit-left,
  .catalog-edit-list,
  .catalog-edit-form {
    max-height: none;
    overflow: visible;
  }
  .catalog-edit-picker {
    max-height: none;
    overflow: visible;
  }
  .catalog-edit-left {
    border-right: 0;
    border-bottom: 1px solid var(--surface-panel-border, #d5ddc8);
  }
}