/* Sister Sister v1 — submissions / saved / community.
 * NOTE FOR INTEGRATOR: link this in base.html:
 *   <link rel="stylesheet" href="/static/css/submit.css">
 * This file is owned by the submissions build; do not edit without coordinating.
 */

.submit-page { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

.submit-page h1 { font-size: 1.75rem; margin: 0 0 0.75rem; }
.submit-page h2 { font-size: 1.15rem; margin: 1.75rem 0 0.5rem; }

.page-lede { color: #444; line-height: 1.5; margin: 0 0 1.5rem; }

.confirmation {
  font-size: 1.1rem; line-height: 1.5;
  background: #f4fbf4; border: 1px solid #bfe3bf; border-radius: 0.75rem;
  padding: 1rem 1.25rem; margin: 1rem 0;
}

.submit-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 1.25rem 0; }

.btn {
  display: inline-block; padding: 0.65rem 1.25rem; border-radius: 999px;
  background: #111; color: #fff; text-decoration: none; border: 1px solid #111;
  font: inherit; cursor: pointer; text-align: center;
}
.btn-secondary { background: #fff; color: #111; }
.btn-primary { background: #111; color: #fff; }

/* Start toggle (link vs scratch) */
.start-toggle { display: flex; gap: 0.5rem; margin: 0 0 1.5rem; }
.start-toggle a {
  flex: 1; text-align: center; padding: 0.65rem 0.5rem; border-radius: 0.75rem;
  border: 1px solid #ccc; color: #111; text-decoration: none; background: #fff;
}
.start-toggle a.is-active { background: #111; color: #fff; border-color: #111; }

/* Form fields */
.submit-form .field { margin: 0 0 1.1rem; border: 0; padding: 0; }
.submit-form label, .submit-form legend {
  display: block; font-weight: 600; margin-bottom: 0.35rem;
}
.submit-form input[type="text"],
.submit-form input[type="url"],
.submit-form input[type="email"],
.submit-form input[type="date"],
.submit-form input[type="time"],
.submit-form textarea,
.submit-form select {
  width: 100%; box-sizing: border-box; font: inherit;
  padding: 0.6rem 0.75rem; border: 1px solid #bbb; border-radius: 0.5rem;
  background: #fff;
}
.submit-form textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

.radio { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; margin: 0.35rem 0; }

.field-hint { font-size: 0.85rem; color: #666; margin: 0.35rem 0 0; }

.field-error { color: #a00; font-size: 0.9rem; margin: 0.35rem 0 0; }
.form-error-summary {
  color: #a00; background: #fef3f3; border: 1px solid #f0c0c0;
  border-radius: 0.5rem; padding: 0.75rem 1rem;
}

/* Saved page */
.saved-empty { color: #444; }
.saved-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 0; border-bottom: 1px solid #e5e5e5;
}
.saved-row-link { color: inherit; text-decoration: none; flex: 1; }
.saved-row-link:hover .saved-row-title { text-decoration: underline; }
.saved-row-title { display: block; font-weight: 600; }
.saved-row-when { display: block; font-size: 0.85rem; color: #666; }
.saved-row-remove {
  font: inherit; font-size: 0.85rem; color: #666; background: none;
  border: 1px solid #ccc; border-radius: 999px; padding: 0.3rem 0.75rem; cursor: pointer;
}
.saved-past { margin-top: 1.25rem; }
.saved-past summary { cursor: pointer; font-weight: 600; padding: 0.5rem 0; }

/* Community */
.community-page .guidelines { padding-left: 1.25rem; line-height: 1.6; }
.community-page .notice {
  background: #fff8e1; border: 1px solid #f0d98c; border-radius: 0.75rem;
  padding: 0.9rem 1.1rem; line-height: 1.5;
}

/* Save + share buttons */
.save-btn, .share-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: none; border: 1px solid transparent; border-radius: 999px;
  padding: 0.35rem; cursor: pointer; color: #111; font: inherit;
}
.save-btn:hover, .share-btn:hover { border-color: #ccc; }
.save-btn.is-saved { color: #111; }
.save-btn.is-saved svg path { fill: #111; }
.share-btn { font-size: 0.9rem; padding: 0.35rem 0.6rem; }

/* Toast: subtle, one at a time, clear of bottom nav / sticky actions */
.ss-toast {
  position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%) translateY(0.5rem);
  background: #111; color: #fff; font-size: 0.9rem;
  padding: 0.65rem 1.1rem; border-radius: 999px;
  opacity: 0; pointer-events: none; z-index: 60; max-width: 90vw;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ss-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }