/* Free prompt pages (/prompts and /prompts/<slug>). Loaded on top of styles.css; everything is scoped to .page-prompts.
   The prompt pages borrow the blog post layout (.post-head, .article) and add the copy box, the hub cards with
   their email forms, and the membership block. Backgrounds stay white, cream and black. */

/* ---- hub cards ---- */
.page-prompts .res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;align-items:stretch}
.page-prompts .res-card{background:#fff;border-top:12px solid var(--accent,var(--lime));padding:30px 30px 34px;display:flex;flex-direction:column}
.page-prompts .res-card:nth-child(2n){--accent:var(--orange)}
.page-prompts .res-card .meta{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px;color:var(--orange)}
.page-prompts .res-card h3{font-size:clamp(1.4rem,2vw,1.8rem);line-height:1.15;margin-bottom:12px}
.page-prompts .res-card > p{color:#4d4a46}
.page-prompts .get-form{display:grid;gap:14px;margin-top:auto;padding-top:26px}
.page-prompts .get-form .field{display:grid;gap:6px}
.page-prompts .get-form label{font-size:.8rem;font-weight:700;color:var(--body)}
.page-prompts .get-form input{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #c9c5bf;border-radius:6px;padding:13px 14px}
.page-prompts .get-form input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 2px var(--lime)}
.page-prompts .get-form input[aria-invalid="true"]{border-color:var(--orange)}
.page-prompts .get-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.page-prompts .get-form .btn{width:100%;min-width:0;margin-top:4px}
.page-prompts .get-form .note{font-size:.9rem;line-height:1.5;color:#6f6a64;margin:0}
.page-prompts .get-form .msg{font-size:.95rem;font-weight:700;color:var(--ink);min-height:1.4em;margin:0}
.page-prompts .get-form.is-done .field,.page-prompts .get-form.is-done .btn,.page-prompts .get-form.is-done .note{display:none}
.page-prompts .hub-note{margin-top:48px;font-style:italic;color:#4d4a46;font-size:1.05rem}

/* ---- the copy box ---- */
.page-prompts .prompt{margin:28px 0 0;background:var(--cream);border-top:12px solid var(--lime);color:var(--ink)}
.page-prompts .prompt-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px 14px 24px;border-bottom:1px solid #e6e2dc}
.page-prompts .prompt-bar span{font-size:.74rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}
.page-prompts .prompt pre{margin:0;padding:24px;font-family:var(--sans);font-size:1.02rem;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-height:none}
.page-prompts .copy{min-width:0;padding:10px 18px;font-size:.9rem;white-space:nowrap}
.page-prompts .copy.done{background:var(--lime);border-color:var(--lime);color:#fff;transform:none}

/* ---- blocks on the prompt page ---- */
.page-prompts .article h2{margin-top:48px}
.page-prompts .article ol li,.page-prompts .article ul li{color:var(--body)}
.page-prompts .article .join{margin:56px 0 0;background:var(--cream);border-top:12px solid var(--orange);padding:32px 34px 36px}
.page-prompts .article .join p{margin:0 0 22px;color:var(--ink);font-size:1.1rem}
.page-prompts .article .join .btn{text-decoration:none;color:#fff}
.page-prompts .article .join .btn:hover{color:var(--black)}

@media (max-width:640px){
  .page-prompts .res-card{padding:24px 22px 28px}
  .page-prompts .prompt pre{padding:18px;font-size:1rem}
  .page-prompts .prompt-bar{padding:12px 12px 12px 18px}
  .page-prompts .article .join{padding:26px 22px 30px}
  .page-prompts .article .join .btn{width:100%;min-width:0}
}