/* ============================================================================
   Demo-only enhancements for Demo 2 (loaded AFTER the app CSS).
   These rules are intentionally UNLAYERED, so they override the app's
   Tailwind utilities (which live in @layer utilities).
     1. Mobile responsiveness polish (textbox sizing, tap targets, spacing).
     2. Styling for the injected "auto-fill" demo helper button.
   ============================================================================ */

/* ---- Auto-fill demo button (floating, injected by demo-enhance.js) ------- */
#demo-autofill-btn {
  position: fixed;
  inset-block-end: 16px;
  inset-inline-start: 16px;
  z-index: 9999;
  display: none;                       /* shown only on the first form */
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: 'Assistant', 'Heebo', 'Arial Hebrew', Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: hsl(170 53% 46%);        /* Yozmot mint-deep (distinct from red) */
  border: 1px solid hsl(170 53% 40%);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(31, 31, 31, 0.18);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}
#demo-autofill-btn.is-visible { display: inline-flex; }
#demo-autofill-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(31, 31, 31, 0.24); }
#demo-autofill-btn:active { transform: translateY(0); }
#demo-autofill-btn[data-done="1"] { background: hsl(140 45% 45%); border-color: hsl(140 45% 38%); }

/* ---- Mobile responsiveness polish --------------------------------------- */
@media (max-width: 640px) {
  /* Prevent iOS focus-zoom (needs >=16px) and give inputs a refined,
     consistent touch height (the app ships h-10 / 40px). */
  .ya-apply input:not([type="radio"]):not([type="checkbox"]),
  .ya-apply select,
  .ya-apply textarea {
    font-size: 16px !important;
    height: 2.75rem;                   /* 44px */
  }

  /* THE KEY FIX: the identity + business grids ship single-column on mobile,
     so every short field (name, date, phone…) becomes a long full-width bar
     that looks stretched and empty. Pair them two-per-row instead. Aligning
     to the row's end keeps the inputs level even when one label wraps. */
  .ya-apply form > .grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.85rem 0.75rem !important;
    align-items: end;
  }
  /* Fields that genuinely need the room keep the full width. */
  .ya-apply form > .grid > *:has(#city),
  .ya-apply form > .grid > *:has(#email) {
    grid-column: 1 / -1;
  }

  /* Tighten the vertical rhythm (form ships space-y-6 = 24px). */
  .ya-apply form > * + * { margin-top: 1.15rem !important; }

  /* Edge-safe gutters + trimmed top padding (app uses px-6 = 24px, py-8). */
  .ya-apply .max-w-2xl,
  .ya-apply .max-w-xl {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1.25rem !important;
  }

  /* Smaller labels + page heading so nothing wraps awkwardly in a half column. */
  .ya-apply h1.text-2xl { font-size: 1.4rem; line-height: 1.25; }
  .ya-apply form label { font-size: 0.85rem; }

  /* Bigger tap area for the single-select cards (business idea). */
  .ya-apply [role="radiogroup"] label {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
  }

  /* Full, comfortable primary/submit buttons. */
  .ya-apply form button[type="submit"],
  .ya-apply button.w-full {
    min-height: 3rem;
    font-size: 16px;
  }

  /* Trim the sticky header height on small screens. */
  .ya-apply header .h-16 { height: 3.25rem; }

  /* Keep the floating helper from hugging the very edge. */
  #demo-autofill-btn { inset-block-end: 12px; inset-inline-start: 12px; font-size: 13px; padding: 9px 15px; }
}