/* ===============================
   Retro Polish Pass — v1
   Layer after style-retro.css + style-retro-layout.css
================================= */

:root{
  --grid-square-size: clamp(40px, 8.5vw, 80px);
  --grid-gap: 2px;
}
@media (max-width: 1024px){
  :root{
    --grid-square-size: clamp(56px, 12vw, 96px);
  }
}
@media (max-width: 767px){
  :root{
    --grid-square-size: clamp(64px, 16vw, 112px);
  }
}
@media (max-width: 480px){
  :root{
    --grid-square-size: clamp(68px, 18vw, 120px);
  }
}

/* Mobile/tablet-only selection bar visibility */
#selection-bar{
  display: none;
}
@media (max-width: 1024px){
  #selection-bar{
    display: flex;
  }

  .selection-bar{
    display: none;
  }
}
@media (min-width: 1025px){
  #selection-bar{
    display: none !important;
  }
}

/* 2) Veg shelf presence on desktop */
#veg-menu{
  border: 1px solid var(--surface-4);
  border-radius: 16px;
  min-height: 0;
}
.veg-selection-container{
  min-height: 160px;
  align-content: flex-start;
}
@media (max-width: 1024px){
  #veg-menu{ min-height: 0; }
  .veg-selection-container{ min-height: 140px; }
}
@media (max-width: 767px){
  #veg-menu{ min-height: 0; }
  .veg-selection-container{ min-height: 120px; }
}
@media (max-width: 480px){
  #veg-menu{ min-height: 0; }
  .veg-selection-container{ min-height: 110px; }
}

/* Slightly bigger tiles look great with the new bezel */
@media (min-width: 1101px){
  .veg-icon{ width: 78px; height: 78px; }
}

/* 3) Category tab glow/underline */
#vegTabs button{
  position: relative;
  transition: border-color .15s, background .15s, transform .06s, box-shadow .15s;
}
#vegTabs button[aria-selected="true"]{
  background: color-mix(in srgb, var(--brand-400) 18%, var(--surface-2));
  border-color: var(--brand-400);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-400) 30%, transparent);
}
#vegTabs button[aria-selected="true"]::after{
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-500), transparent);
}

/* 6) Tooltip timing & legibility */
.grid-square[data-companion]::after{
  transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
  transform: translateX(-50%) translateY(-8px);
}
.grid-square[data-companion]:hover::after,
.grid-square[data-companion].show-tooltip::after{
  transform: translateX(-50%) translateY(-10px);
}

/* === Revert grid to original working style === */

/* === Thin, bright highlight borders on dark theme === */
.grid-square.good-neighbor,
.grid-square.bad-neighbor,
.grid-square.mixed-neighbor{
  position: relative;
  background: #0c1118;
}

/* Bright, thin inset border (doesn’t change layout) */
.grid-square.good-neighbor{
  box-shadow:
    0 0 0 2px #2aff8c inset,     /* neon green */
    inset 0 0 10px rgba(42,255,140,.18);
}

.grid-square.bad-neighbor{
  box-shadow:
    0 0 0 2px #ff5c5c inset,     /* neon red */
    inset 0 0 10px rgba(255,92,92,.18);
}

.grid-square.mixed-neighbor{
  box-shadow:
    0 0 0 2px #ffb349 inset,     /* neon orange */
    inset 0 0 10px rgba(255,179,73,.18);
}

.plant.bad-neighbor{
  outline: 2px solid #ff5c5c;
  box-shadow: 0 0 10px rgba(255,92,92,.18);
}
.plant.good-neighbor{
  outline: 2px solid #2aff8c;
  box-shadow: 0 0 10px rgba(42,255,140,.18);
}
.plant.mixed-neighbor{
  outline: 2px solid #ffb349;
  box-shadow: 0 0 10px rgba(255,179,73,.18);
}
.plant.is-selected{
  outline: 2px solid var(--brand-400);
  box-shadow: 0 0 10px color-mix(in srgb, var(--brand-400) 18%, transparent);
}
.plant.mixed{ outline: 2px solid #ff9800; }  /* orange */

/* Keep hover/tooltip behavior unchanged */
.grid-square[data-companion]::after{
  will-change: transform, opacity;
}
/* Grid bezel remains defined in layout overrides; no viewport overrides here */

/* Ensure the scroll container can actually scroll on touch */
.grid-scroll-container{ -webkit-overflow-scrolling: touch; }

/* Full-width planner shell override (final stylesheet) */
#layout{
  max-width: none;
  width: 100%;
  margin: 0;
}

/* === Left control panel hierarchy + quieter UI === */
.left-column #controlsDrawer{
  border-color: color-mix(in srgb, var(--surface-3) 70%, transparent);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

.left-column #controlsDrawer .grid-controls{
  padding: 12px;
  gap: 12px;
}

.left-column #controlsContent{
  display: grid;
  gap: 12px;
}

.left-column #controlsContent > *{
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.left-column #controlsContent > *:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.left-column #controlsDrawer .dimension-row{
  gap: 8px;
}

.left-column #controlsDrawer .dimension-field{
  gap: 4px;
}

.left-column #controlsDrawer .dimension-field label{
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.left-column #controlsDrawer button,
.left-column #controlsDrawer input[type="submit"]{
  min-height: 38px;
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 600;
  border-color: color-mix(in srgb, var(--surface-4) 60%, transparent);
  box-shadow: none;
}

.left-column #controlsDrawer input[type="text"],
.left-column #controlsDrawer input[type="number"],
.left-column #controlsDrawer select{
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--surface-3) 70%, transparent);
}

.left-column #controlsDrawer .grid-buttons{
  gap: 8px;
}

.left-column #controlsDrawer .export-controls{
  grid-column: 1 / -1;
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.left-column #controlsDrawer .export-label{
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.left-column #controlsDrawer .export-toggle{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.left-column #controlsDrawer .export-format{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.left-column #controlsDrawer .export-controls{
  border-color: color-mix(in srgb, var(--surface-3) 70%, transparent);
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
  box-shadow: none;
}

.left-column #controlsDrawer .export-toggle{
  border-color: color-mix(in srgb, var(--surface-4) 70%, transparent);
}

.left-column #controlsDrawer .export-format{
  min-height: 34px;
  font-size: 0.85rem;
}

.left-column #controlsDrawer .rotation-notice,
.left-column #controlsDrawer .export-status{
  font-size: 0.82rem;
}

/* Companion insights header */
.insights-panel .insights-header{
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
}

.insights-panel .insights-title{
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}