/* Ideas page. Loads after styles.css and home.css. */

/* The page is always at least screen-tall, so after sending (short thank-you card)
   the footer stays at the bottom instead of floating up. */
body.ideas-page { min-height: 100vh; display: flex; flex-direction: column; }
body.ideas-page > main { flex: 1 0 auto; }

.ideas-top { padding-top: 88px; }
.ideas-top .h-line { max-width: 11em; font-size: clamp(42px, 6vw, 72px); }
.ideas-top .h-sub { max-width: 520px; }

/* ── The form: three question cards ───────────────────────────────────── */
.idea-form { max-width: 680px; margin: 64px auto 0; display: flex; flex-direction: column; gap: 14px; }
.idea-form[hidden] { display: none; }
.iq {
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
}
.iq-num { margin: 0 0 14px; color: var(--faint); font-size: 13px; }
.iq-title { display: block; margin: 0; color: #f2f2f3; font-size: 19px; font-weight: 500; letter-spacing: -.2px; }
.iq-help { margin: 6px 0 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }

.iq textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #2a2a2f;
  border-radius: 10px;
  background: #0e0e10;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.iq textarea::placeholder { color: #55555c; }
.iq textarea:hover { border-color: #36363c; }
.iq textarea:focus { outline: none; border-color: var(--app-accent); box-shadow: 0 0 0 3px rgba(94, 92, 230, .22); }
.iq-count { margin: 8px 0 0; color: var(--faint); font-size: 12.5px; text-align: right; }

/* price buttons: real radio buttons, styled as pills */
.iq-prices { display: flex; flex-wrap: wrap; gap: 8px; }
.iq-price { position: relative; cursor: pointer; }
.iq-price input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.iq-price span {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 16px;
  border: 1px solid #2e2e33;
  border-radius: 10px;
  background: #18181b;
  color: #c9c9cf;
  font-size: 15px;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.iq-price:hover span { border-color: #45454c; color: #fff; }
.iq-price input:checked + span { border-color: #7a50ff; background: var(--brand-2); color: #fff; }
.iq-price input:focus-visible + span { outline: 2px solid var(--app-accent); outline-offset: 2px; }

.iq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.iq-send { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.iq-send .h-btn { min-width: 120px; }
.iq-send .h-btn[disabled] { opacity: .6; pointer-events: none; }
.iq-note { margin: 0; color: var(--faint); font-size: 14px; }
.iq-error { margin: 0; color: #f08a8a; font-size: 14.5px; }
.iq-error.is-calm { color: var(--muted); }

/* ── After sending: the same purple dotted panel as "Try it on your next copy" on the homepage
   (.h-final in home.css: background, dot grid, and dots that swell around the cursor via main.js) ── */
.idea-done {
  max-width: 680px;
  margin: 64px auto 0;
  padding: 56px 24px;
  outline: none;
}
.idea-done img { margin: 0 auto; border-radius: 24%; }
.idea-done h2 { margin: 26px 0 0; font-size: clamp(28px, 3.6vw, 38px); font-weight: 450; letter-spacing: -.03em; }
.idea-done p { margin: 12px 0 28px; color: rgba(255, 255, 255, .78); font-size: 16.5px; }

@media (prefers-reduced-motion: no-preference) {
  .idea-done:not([hidden]) { animation: rise .6s var(--ease) both; }
}
@media (max-width: 760px) {
  .idea-form, .idea-done { margin-top: 48px; }
  .iq { padding: 20px 18px 22px; }
  .iq-send { flex-direction: column; align-items: stretch; gap: 12px; }
  .iq-note { text-align: center; }
}