/* The status post maker (components/status-posts/status-post-maker.tsx) on
   /just-listed-just-sold-posts/. Built on flyer-maker.css (the shared .fm-*
   layout) and styles.css tokens; no colours of its own. Adds the status
   buttons, the Post / Story switch, the Story's narrower preview and the
   caption box. */

/* Status: four large choices, one row; two by two on phones. */
.sp-status { border:0; padding:0; margin:24px 0 0; min-width:0; }
.sp-status legend { padding:0; font-size:.9375rem; font-weight:610; color:#343d52; margin-bottom:12px; }
.sp-status-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:760px; }
.sp-status-option span { display:flex; align-items:center; justify-content:center; min-height:52px; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:#fff; font-weight:650; color:#343d52; text-align:center; cursor:pointer; transition:border-color .16s,box-shadow .16s,color .16s; }
.sp-status-option span:hover { border-color:#c0b5d6; }
.sp-status-option input:checked + span { border-color:var(--purple); box-shadow:0 0 0 1px var(--purple), 0 9px 24px -14px #6335ed33; color:var(--purple-deep); }
.sp-status-option input:focus-visible + span { outline:3px solid #8864ff; outline-offset:3px; }

/* Post / Story switch above the preview. */
.sp-switch { display:inline-flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:4px; margin:0 0 14px; background:#fff; }
.sp-switch-option span { display:block; padding:7px 18px; border-radius:999px; font-size:.9375rem; font-weight:610; color:#343d52; cursor:pointer; }
.sp-switch-option input:checked + span { background:var(--purple); color:#fff; }
.sp-switch-option input:focus-visible + span { outline:3px solid #8864ff; outline-offset:2px; }

/* A Story is tall: shown narrower so it fits beside the form. */
.sp-preview-box.sp-story { max-width:300px; margin-inline:auto; }

/* The caption under the preview. */
.sp-caption { display:grid; gap:8px; margin-top:22px; }
.sp-caption label { font-size:.9375rem; font-weight:610; color:#343d52; }
.sp-caption textarea { width:100%; resize:vertical; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; font-size:.9375rem; line-height:1.55; color:#232a3d; }
.sp-caption .button { justify-self:start; }

@media (max-width:560px) {
  .sp-status-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-preview-box.sp-story { max-width:240px; }
  .sp-caption .button { justify-self:stretch; }
}

/* The page around the tool (/just-listed-just-sold-posts/). */
.sp-hero { padding-bottom:8px; }
.sp-hero .ch-lead { max-width:680px; }
.sp-examples-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:34px; }
.sp-examples-grid figure { margin:0; }
.sp-examples-grid img { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 24px 44px -26px #292137b3, 0 2px 8px #29213726; }
@media (max-width:850px) { .sp-examples-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }