/* ── Garden empty state ────────────────────────────────────────────────────
   /garden used to render a lookup form above a blank screen. This is what a
   visitor sees before a garden is opened: what a garden is, how to start one,
   and the public feed that needs no name at all.
   ------------------------------------------------------------------------ */

.garden-empty {
  border: 1px dashed color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 14px;
  padding: 34px 28px;
  margin: 8px 0 64px;
  max-width: 62ch;
}

.garden-empty h2 {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(22px, 3.4vw, 30px);
  margin: 0 0 12px;
  font-weight: 400;
}

.garden-empty p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.garden-empty p strong { color: var(--fg); font-weight: 500; }

.garden-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

/* Both actions are real links, sized as proper tap targets rather than
   inline text. min-height 44px is the target, not the painted box. */
.garden-empty-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--fg);
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.garden-empty-actions a:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.garden-empty-actions a.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}

.garden-empty-actions a.primary:hover {
  background: color-mix(in srgb, var(--accent) 86%, #fff);
}

.garden-empty .metric-note { margin: 0; font-size: 13px; }

@media (max-width: 420px) {
  .garden-empty { padding: 26px 18px; }
  .garden-empty-actions a { width: 100%; justify-content: center; }
}