/* simple.css — the beginner "simple mode" page (issue #586). Leans on the shared
   style.css (container, section-title, garden-card, btn, muted); this adds only
   the persistent size bar + the embedded-canvas layout. */

.simple-lede { max-width: 46rem; margin: 0.75rem 0 1.25rem; }

/* The persistent wide, skinny control bar: name + size, editable at any time.
   Doubles as the create form before a garden exists. */
.simple-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.simple-field { display: flex; flex-direction: column; gap: 0.35rem; }
.simple-field--grow { flex: 1 1 12rem; min-width: 10rem; }
.simple-field > span { font-weight: 600; font-size: 0.85rem; }
.simple-field input {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--leaf-soft, #cfe0c8);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink, #111);
}
.simple-field input:focus-visible { outline: 2px solid var(--leaf, #4a8a3e); outline-offset: 1px; }
.simple-field input:disabled { opacity: 0.5; cursor: not-allowed; }
.simple-input-unit { display: flex; align-items: center; gap: 0.4rem; }
.simple-input-unit input { width: 6rem; }
.simple-unit { color: var(--ink, #444); opacity: 0.6; font-style: normal; font-size: 0.9rem; }
.simple-bar__actions { display: flex; gap: 0.6rem; align-items: center; margin-left: auto; }

/* The reused editor renderer draws into this box; it clears to transparent, so
   the warm paper background shows through around the plan. mount.js fits the
   garden to it (zoom-to-extents) and re-fits on resize. */
.simple-canvas-wrap {
  position: relative;
  width: 100%;
  height: min(68vh, 40rem);
  min-height: 18rem;
  background: var(--paper-warm, #fafafa);
  border: 1px solid var(--leaf-soft, #dce7d6);
  border-radius: 12px;
  overflow: hidden;
}
.simple-canvas-wrap canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Add-plants panel: species picker + the planted list. */
.simple-plants { padding: 1rem 1.25rem; margin-bottom: 1rem; }
.simple-plant-picker { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.simple-plant-picker .simple-field--grow { flex: 1 1 14rem; }
.simple-plant-picker select,
.simple-plant-picker input {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--leaf-soft, #cfe0c8);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink, #111);
}
.simple-plant-picker input { width: 6rem; }
.simple-plant-picker #qs-add { margin-left: auto; }
.simple-plant-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.simple-plant-row {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.35rem 0.25rem 0.7rem;
  border: 1px solid var(--leaf-soft, #dce7d6); border-radius: 999px;
  background: var(--leaf-soft, #eef5ea);
}
.simple-plant-row span { font-size: 0.9rem; font-weight: 600; }