/* post-opportunity.css — only what the shared `post.css` shell does not cover.
 *
 * The form is built on the same `jf-*` classes as `/post`, deliberately: the
 * two posting flows should be indistinguishable in feel, and every rule this
 * file does NOT contain is a rule that cannot drift between them.
 */

.jf-hidden { display: none !important; }

.po-textarea { min-height: 8rem; resize: vertical; }

.po-label {
  display: block;
  margin: 1rem 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ink-2);
}

.po-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.po-check input { margin-top: 0.2rem; flex-shrink: 0; }

/* ── Polish with AI ───────────────────────────────────────────
 * A quiet secondary action. It must not compete with Continue: the button
 * that matters on this screen is the one that moves forward.
 */
.po-ai-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}

.po-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--lav-deep);
  background: var(--bg-tint);
  border: 1px solid #E0DBFB;
  border-radius: 999px;
  cursor: pointer;
}

.po-ai:hover { background: #EBE7FD; }
.po-ai:disabled { opacity: 0.55; cursor: progress; }
.po-ai-spark { font-size: 0.875rem; }
.po-ai-note { font-size: 0.8125rem; color: var(--ink-3); }

/* ── Review ───────────────────────────────────────────────────
 * A definition list, so the label and the answer stay associated for a screen
 * reader instead of being two visually adjacent strings.
 */
.po-review {
  margin: 1.25rem 0 0;
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: 0.5rem 1rem;
  font-size: 0.9375rem;
}

.po-review dt { font-weight: 700; color: var(--ink-3); }
.po-review dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.po-error {
  margin: 1rem 0 0;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  font-size: 0.875rem;
}

/* ── The two ways to publish ─────────────────────────────────── */
.po-choose-wrap { max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

.po-option { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.po-option:first-of-type { border-top: 0; padding-top: 0.5rem; }

.po-option-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  font-size: 1.0625rem;
}

.po-price { font-weight: 800; font-size: 1.25rem; }
.po-option-alt .po-price { color: #1B8A44; }
.po-full { width: 100%; margin-top: 0.875rem; }

.po-stores { display: flex; gap: 0.5rem; margin-top: 0.875rem; }

.po-store {
  flex: 1;
  text-align: center;
  padding: 0.75rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
}

/* NO dark-mode block, deliberately.
 *
 * `styles.css` has no dark theme — `/post` and this page are light-only. An
 * earlier version of this file carried `@media (prefers-color-scheme: dark)`
 * overrides copied from `listing-checkout.css`, which DOES theme itself. On a
 * machine set to dark, those overrides won while the page around them stayed
 * white: the review answers rendered #F5F3FF on #FFFFFF and were invisible.
 *
 * Colours below come from the site's own tokens for the same reason — so this
 * file cannot disagree with the page it is part of.
 */