/*!
 * Veg Planner — Retro Tech Theme (drop-in replacement for style.css)
 * Matches the dark/retro look used in your Biodynamic Calendar & Veg‑O‑Matic apps.
 * Keep existing HTML/JS. Only swap the stylesheet link to this file.
 *
 * Author: ChatGPT for Frederic (Backyard-Farmer)
 * Version: 1.0.0 (2025-08-28)
 */

/* -----------------------------------------
   0) TOKENS & BASE
----------------------------------------- */
:root{
  /* Palette */
  --bg: #0b0e12;               /* deep slate */
  --bg-grad-top: #131922;
  --bg-grad-bot: #090c11;

  --surface-1: #0f141b;        /* panels */
  --surface-2: #101720;        /* screen */
  --surface-3: #1b2431;        /* borders */
  --surface-4: #273041;        /* strong borders */
  --paper: #ebe6d7;            /* off‑white for labels if needed */

  /* Brand / accents (neon-ish, same family as other apps) */
  --brand-300: #35518f;
  --brand-400: #4a6ed1;
  --brand-500: #6da3ff;
  --brand-amber: #f7c66b;
  --brand-green: #5fe49b;
  --brand-purple: #a89bff;
  --selection-blue: var(--brand-400);

  /* States */
  --good: color-mix(in srgb, var(--brand-green) 60%, transparent);
  --bad:  color-mix(in srgb, #ff6b6b 60%, transparent);
  --mix:  color-mix(in srgb, var(--brand-amber) 60%, transparent);

  /* Misc */
  --ink: #dbe7ff;
  --ink-dim: #aab8d4;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 12px 30px rgba(0,0,0,.45);
  --grid-square-size: clamp(38px, 9vw, 72px);
  --cell-size: var(--grid-square-size);
  --planner-gap: 12px;
  --planner-pad: clamp(12px, 2.5vw, 24px);
}

@media (max-width: 767px){
  :root{
    --grid-square-size: calc(var(--grid-square-size) - 6px);
  }
}

@media (min-width: 768px){
  :root{
    --planner-gap: 16px;
  }
}

/* Reset bits */
*,
*::before,
*::after{ box-sizing: border-box; }
html, body{ height: auto; min-height: 100%; }
body{
  margin: 0;
  color: var(--ink);
  font: 16px/1.5 "Cabin", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(120% 140% at 50% 0%, var(--bg-grad-top) 0%, var(--bg) 52%, var(--bg-grad-bot) 100%);
  user-select: none;
}

.brand-banner{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 88px;
  margin: 0 auto;
  padding: 0;
}

#export-capture-root .brand-banner{
  width: 100%;
  max-width: 1200px;
}

#export-capture-root .export-banner{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 14px auto 20px;
  padding: 18px 0 12px;
  text-align: center;
}

#export-capture-root .export-banner .brand-banner{
  margin: 0;
}

.brand-banner img{
  max-width: min(380px, 90vw);
  height: auto;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
  min-height: 64px;
}

.brand-banner__fallback{
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 12px 18px;
  color: var(--ink);
}

/* Prevent inadvertent text highlighting while dragging within the planner */
#workArea,
#grid-container,
.plant,
.grid-square{
  user-select: none;
}

/* Allow text selection within form fields */
input,
textarea{
  user-select: text;
}

/* -----------------------------------------
   1) LAYOUT SHELL (structure lives in style-retro-layout.css)
----------------------------------------- */
#layout{
  width: 100%;
}

.controls-block:first-child{ margin-top: 0; }

.grid-outer,
.palette-block,
.veg-menu,
#veg-menu{ margin-bottom: 0; }

#workArea{ flex: 1; min-width: 0; }

.screen-title{ display: none; }

/* -----------------------------------------
   2) CONTROLS DRAWER (LEFT) — retro dark panel
----------------------------------------- */
#controlsDrawer, #insightsPanel{
  background: var(--surface-1);
  border: 1px solid var(--surface-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

#controlsDrawer{
  width: 280px;
  position: relative;
  transition: width .25s ease;
}
#controlsDrawer[data-state="closed"]{ width: 46px; overflow: hidden; }

#controlsDrawer .drawer-grip{ display: none; }

.grid-controls{
  border: none;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.dimension-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
}

.dimension-field{ display: grid; gap: 6px; }
.dimension-field label{ font-size: .85rem; color: var(--ink-dim); }

.grid-buttons{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  align-items: stretch;
}
#generateBtn{ grid-column: 1 / -1; }

.grid-buttons > *{ height: 100%; }

.rotation-notice{
  margin-top: 0.75rem;
  font-size: 0.85rem;
  opacity: 0.9;
}

#exportBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Inputs */
input[type="text"],
input[type="number"],
select{
  font-size: 1rem;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--surface-3);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
input:focus, select:focus{
  border-color: var(--brand-400);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 25%, transparent);
  outline: none;
}

/* Buttons */
button,
input[type="submit"]{
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--surface-4);
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, transform .06s;
}
button:hover{ border-color: var(--brand-300); }
button:active{ transform: translateY(1px); }
button.secondary{ background: #0f1716; }
button.secondary:hover{ border-color:#2a6; }
button.subtle{ background: none; border-style: dashed; color: var(--ink-dim); }
button.subtle:hover{ border-color: var(--brand-400); color: var(--ink); }
button.danger{
  background: color-mix(in srgb, #f04f45 18%, var(--surface-2));
  border-color: color-mix(in srgb, #f04f45 70%, var(--surface-4));
  color: #fff;
}
button.danger:hover{ border-color: #f04f45; }
button.danger.is-confirming{
  background: #f04f45;
  border-color: #f04f45;
  color: #fff;
}

.active-state{
  background: #3a7bff;
  border-color: #3a7bff;
  color: white !important;
  box-shadow: 0 0 10px rgba(58, 123, 255, 0.6);
}

.export-controls{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--surface-3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,26,34,.7), rgba(12,16,22,.7));
}

.export-label{ color: var(--ink-dim); font-size: .9rem; }

.export-toggle{
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--surface-4);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.export-format{
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 8px 14px;
  font-weight: 700;
  color: var(--ink);
  box-shadow: none;
  min-width: 64px;
}

.export-format + .export-format{ border-left: 1px solid var(--surface-4); }

.export-format.is-selected{
  background: color-mix(in srgb, var(--brand-400) 18%, var(--surface-2));
  color: var(--ink);
}

.export-status{
  font-size: .9rem;
  color: var(--ink-dim);
  min-height: 1.2em;
}

/* -----------------------------------------
   3) GRID AREA — CRT-esque screen, thin glow on states
----------------------------------------- */
#grid-area{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.grid-wrapper{
  display: flex;
  justify-content: flex-start;
  padding: 10px; /* outer frame only */
  background: radial-gradient(120% 140% at 50% 10%, #0f151d 0%, #0b1118 100%);
  border: 1px solid var(--surface-4);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), var(--shadow);
}

/* Keep the container's bezel without introducing extra spacing */
#grid-container{
  display: grid;
  /* JS will set gridTemplateColumns/Rows explicitly */
  gap: var(--grid-gap, 2px);
  border: 2px solid var(--surface-4);
  border-radius: var(--radius);
  background: repeating-linear-gradient(0deg, #0f141b, #0f141b 1px, #121924 2px, #121924 3px);
  /* no extra internal padding that would distort grid lines */
}

.grid-square{
  width: var(--grid-square-size);
  height: var(--grid-square-size);
  border: 1px solid var(--surface-3);
  background: #0c1118;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  outline: 1px solid rgba(255,255,255,.02);
}

.placed-veg-icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

.grid .placed-veg-icon {
  z-index: 2;
}

.veg-label-inside{
  position: absolute;
  bottom: 2px; left: 0; right: 0;
  padding: 2px 4px;
  background: rgba(8,10,14,.75);
  font-size: .64rem;
  text-align: center;
  color: var(--ink);
  border-top: 1px solid rgba(255,255,255,.06);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}

/* Tooltips */
.grid-square[data-companion]{ cursor: pointer; }
.grid-square[data-companion]::after{
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: #0a0f15;
  color: var(--ink);
  padding: 6px 8px;
  border-radius: 8px;
  font-size: .76rem;
  border: 1px solid var(--surface-3);
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}
.grid-square[data-companion]:hover::after,
.grid-square[data-companion].show-tooltip::after{
  opacity: 1; visibility: visible;
}

/* -----------------------------------------
   4) INSIGHTS PANEL (RIGHT)
----------------------------------------- */
.insights-toggle{
  display: none;
  margin-top: 10px;
}

#insightsPanel{
  width: 280px;
  padding: 12px;
  min-height: 220px;
}
#insightsPanel h3,
.insights-header{
  margin: 6px 0 10px;
  color: var(--brand-500);
  font-weight: 700;
  letter-spacing: .02em;
}
.insight-body p{ margin: .25rem 0; font-size: .92rem; color: var(--ink); }
.insight-body .insight-none{ color: var(--ink-dim); font-style: italic; }
.insight-body .insight-placeholder{ color: var(--ink-dim); font-style: italic; }

/* Fix insights window height & enable scrolling */
.insights {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow the scrolling body to shrink inside the column */
}

.insight-body,
.insights-body{
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    scrollbar-gutter: stable both-edges;
    scrollbar-width: thin;          /* Firefox */
    scrollbar-color: #3a3f47 #1a1c20;
}

/* Placeholder when empty — prevents the "green strip" collapse */
.insight-body:empty,
.insights-body:empty{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 16px;
    background: rgba(35, 46, 60, .65);
    border-radius: var(--radius);
}
.insight-body:empty::before,
.insights-body:empty::before{
    content: "Insights will appear here once companions are selected.";
    color: var(--ink-dim);
    font-style: italic;
    text-align: center;
    line-height: 1.4;
}

/* Chrome / Edge scrollbar styling */
.insight-body::-webkit-scrollbar,
.insights-body::-webkit-scrollbar,
.veg-scroll::-webkit-scrollbar {
    width: 6px;
}

.insight-body::-webkit-scrollbar-track,
.insights-body::-webkit-scrollbar-track,
.veg-scroll::-webkit-scrollbar-track {
    background: #1a1c20;
    border-radius: 6px;
}

.insight-body::-webkit-scrollbar-thumb,
.insights-body::-webkit-scrollbar-thumb,
.veg-scroll::-webkit-scrollbar-thumb {
    background: #3a3f47;
    border-radius: 6px;
}

/* -----------------------------------------
   5) VEG MENU (TABS + STRIP)
----------------------------------------- */
#veg-menu{
  padding: 16px 14px;
  background: linear-gradient(180deg, rgba(18,24,32,.92), rgba(12,16,22,.92));
  border-left: 1px solid var(--surface-4);
  border-radius: 16px;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

.mobile-toggle{
  display: none;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-bottom: 6px;
}

body.controls-collapsed #controlsContent{ display: none; }
body.vegtabs-collapsed #vegTabs{ display: none; }

#vegTabs{
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 4px;
}
#vegTabs button{
  appearance: none;
  border: 1px solid var(--surface-4);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: border-color .15s, transform .06s, background .15s;
}
#vegTabs button[aria-selected="true"]{
  background: color-mix(in srgb, var(--brand-400) 18%, var(--surface-2));
  border-color: var(--brand-400);
}
#vegTabs button:hover{ border-color: var(--brand-300); }
#vegTabs button:active{ transform: translateY(1px); }

.veg-scroll{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 6px 8px;
  min-height: 0;
  flex: 1 1 auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;          /* Firefox */
  scrollbar-color: #3a3f47 #1a1c20;
}

.veg-selection-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: 12px;
  width: 100%;
}

.veg-item.is-active .veg-icon{
  border-color: var(--brand-amber);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-amber) 55%, transparent), 0 8px 18px rgba(0,0,0,.55);
  transform: translateY(-1px);
}

.veg-item.is-active .veg-label{
  color: var(--brand-amber);
  text-shadow: 0 0 8px rgba(247,198,107,.4);
}

.veg-item{ position: relative; cursor: grab; display:flex; justify-content:center; align-items:center; }

.veg-icon{
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--surface-4);
  border-radius: 10px;
  transition: transform .15s ease, border-color .15s;
  flex: 0 0 auto;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.veg-icon.veg-sprite{
  background-image: url("./assets/sprites/veg_icons_ui.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.veg-icon:hover{ transform: translateY(-2px) scale(1.04); border-color: var(--brand-300); }

.veg-label{
  position: absolute;
  bottom: 2px;
  font-size: .9rem;
  color: var(--ink);
  background: rgba(8,10,14,.72);
  padding: 1px 6px;
  border-radius: 6px;
  pointer-events: none;
  text-transform: capitalize;
  border: 1px solid rgba(255,255,255,.06);
}

.place-mode-bar{
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 6px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border: 1px solid var(--surface-4);
  border-radius: 10px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

.place-mode-bar.is-hint{
  justify-content: center;
  text-align: center;
}

.place-mode-bar button{
  flex: 0 0 auto;
}

.selection-bar{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--surface-4);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  color: var(--ink);
  font-weight: 600;
}

.selection-summary{
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.selection-title{
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.selection-name{
  font-size: 1.05rem;
}

.selection-actions{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.selection-confirm{
  flex-basis: 100%;
  font-size: .9rem;
  color: var(--ink-dim);
  font-weight: 500;
}

.grid-square.place-pulse{
  animation: placePulse .32s ease;
}

@keyframes placePulse{
  0%{ box-shadow: 0 0 0 0 rgba(109,163,255,.22); }
  60%{ box-shadow: 0 0 0 6px rgba(109,163,255,.18); }
  100%{ box-shadow: 0 0 0 0 rgba(109,163,255,0); }
}

/* -----------------------------------------
   6) PDF EXPORT
----------------------------------------- */
body.pdf-export, body.pdf-export *{ color: #000 !important; }
@media (max-width: 1024px){
  #controlsDrawer{ width: 100%; max-width: 100%; }
  #controlsDrawer[data-state="closed"]{ width: 100%; }
  #insightsPanel{ width: 100%; order: 3; }
  .veg-icon{ width: 90px; height: 90px; }
}

@media (min-width: 768px){
  .mobile-toggle{ display: none; }
  body.controls-collapsed #controlsContent{ display: block; }
  body.vegtabs-collapsed #vegTabs{ display: flex; }
}

@media (max-width: 767px){
  .mobile-toggle{ display: inline-flex; }
  body.controls-collapsed #controlsContent{ display: none; }
  body.vegtabs-collapsed #vegTabs{ display: none; }
  #vegTabs{ justify-content: flex-start; }
  #vegTabs button{ padding: 6px 12px; font-size: .95rem; }
  .place-mode-bar{ display: flex; }
  .place-mode-bar .secondary.subtle{ width: auto; padding-inline: 10px; }
  .grid-buttons{
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  /* Make the “Format” control take full width and never crop */
  .export-controls{
    width: 100%;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .export-label{
    flex: 0 0 100%;
  }

  .export-toggle{
    width: 100%;
    display: flex;          /* instead of inline-flex */
  }

  .export-format{
    flex: 1 1 0;
    text-align: center;
    min-width: 0;           /* prevents overflow/cropping */
  }
}

@media (max-width: 480px){
  #vegTabs button{ font-size: .9rem; }
}

#selection-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  border-top: 1px solid var(--surface-4);
  box-shadow: 0 -8px 18px rgba(0,0,0,.35);
  z-index: 40;
}

#selection-bar[hidden]{
  display: none;
}

@media (max-width: 1024px){
  #selection-bar{
    display: flex;
  }
}

#selection-bar button{
  flex: 0 0 auto;
}

#selection-remove{
  background: color-mix(in srgb, #f04f45 18%, var(--surface-2));
  border-color: color-mix(in srgb, #f04f45 70%, var(--surface-4));
  color: #fff;
}

#selection-remove:hover{
  border-color: #f04f45;
}

/* Screen-reader utility */
.sr-only{
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* Non-interactive overlay layer inside the grid */
.grid-overlay{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20; /* above cells, below tooltips if any */
}
.overlay-item{
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated; /* retro crispness */
}

/* new: badge layer above canopy images */
.grid-overlay-icons {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 50; /* fruit/badge icons above selection border */
}
.overlay-badge {
  position: absolute;
  pointer-events: none;
  image-rendering: pixelated;
}

/* layering for plant renderer */
.grid { position: relative; }
.plant-wrapper, .soil-underlay { position: absolute; image-rendering: pixelated; }
.plant-wrapper {
  z-index: 10;
  touch-action: pan-x pan-y;
}
.soil-underlay { z-index: 0; }
.soil-underlay.soil-sprite{
  background-image: url("./assets/sprites/soil_icons.png");
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.plant-wrapper img,
.plant-wrapper .grid-overlay {
  z-index: 1;
  position: relative;
  image-rendering: pixelated;
  pointer-events: none;
}

.plant-wrapper .soil-underlay { z-index: 0; position: absolute; }
.plant-wrapper .canopy { z-index: 1; position: absolute; }
.plant-wrapper .mini-icon-on-overlay {
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--cell-size) * 0.7);
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  pointer-events: none;
}
.plant-wrapper .plant-label,
.plant-wrapper .fruit-badge { z-index: 3; position: absolute; }

/* Visual feedback for companion status */
.plant.good  { outline: 2px solid #1fae51; }
.plant.bad   { outline: 2px solid #e74c3c; }
.plant.mixed { outline: 2px solid #ff9800; }  /* orange */
.plant.selected{
  outline: 2px solid color-mix(in srgb, var(--brand-400) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-400) 30%, transparent);
}

/* Allow fruit to receive pointer events and look grabbable */
.plant-wrapper img.fruit-overlay {
  pointer-events: auto;
  cursor: grab;
  z-index: 3;
  touch-action: pan-x pan-y;
}
.plant-wrapper img.fruit-overlay.dragging {
  cursor: grabbing;
  touch-action: none;
}

.plant-wrapper { cursor: grab; }
.plant-wrapper.dragging {
  cursor: grabbing;
  opacity: 0.95;
  touch-action: none;
}
.plant-wrapper.copying { cursor: copy; }
.plant-wrapper.copying::after {
  content: '+';
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background: #1fae51;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  pointer-events: none;
  z-index: 4;
}

.plant-wrapper.copy-origin {
  opacity: 0.3;
  pointer-events: none;
}

/* Lightweight badge that sits inside the .plant wrapper */
.plant .plant-label {
  position: absolute;
  top: 4px;
  left: 6px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  border-radius: 6px;
  background: rgba(16, 22, 28, 0.8);
  color: #cfe9ff;
  border: 1px solid rgba(120,170,255,0.35);
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  white-space: nowrap;
}

/* hide interactive chrome during export */
.exporting :is(#controlsDrawer, .palette-block, .drag-handle, .resize-handle, #veg-menu, .menu-bar, .hide-for-export),
.pdf-export :is(#controlsDrawer, .palette-block, .drag-handle, .resize-handle, #veg-menu, .menu-bar, .hide-for-export) {
  display: none !important;
}

.export-composite {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.export-composite .export-insights {
  width: min(320px, 32vw);
  box-sizing: border-box;
  border: 2px solid var(--surface-3);
  border-radius: 10px;
  padding: 12px;
  background: #fff;
}

.export-insights-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(340px, 34vw);
}

.export-insights-summary {
  border: 1px solid var(--surface-4);
  border-radius: 10px;
  padding: 12px;
  background: #f9fbff;
}

.export-insights-summary h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--ink-strong);
}

.export-insight-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.export-insight-card {
  border: 1px solid var(--surface-4);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.export-insight-card p {
  margin: 2px 0;
  line-height: 1.4;
}

.export-insight-card .insight-title {
  font-weight: 700;
  color: var(--ink-strong);
}

.export-insight-card .insight-status {
  color: var(--ink-dim);
}

/* make sure overlay elements are rendered by html2canvas */
.grid-area, #grid-area, .plant-wrapper, .grid-overlay, .grid-overlay-icons {
  transform: translateZ(0); /* nudge to a separate layer, stabilizes render */
}

/* Selection border */
.plant.is-selected {
  outline: 2px solid var(--selection-blue);
}