/* Shared form, media and management components. Page layouts live in pages/. */
:root {
  --visibility-members-bg: #0f6f7d;
  --visibility-members-ink: #fff;
  --visibility-public-bg: #5f7a4a;
  --visibility-public-ink: #fff;
}
:root:where([data-theme="dark"]) {
  --visibility-members-bg: #15646f;
  --visibility-members-ink: #eaf7fa;
  --visibility-public-bg: #4d6238;
  --visibility-public-ink: #e6f0dd;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --visibility-members-bg: #15646f;
    --visibility-members-ink: #eaf7fa;
    --visibility-public-bg: #4d6238;
    --visibility-public-ink: #e6f0dd;
  }
}
[hidden] { display: none !important; }
.error-page-actions { margin-top: 2rem; }
.auth-section { margin: 24px 0; }
.auth-section-heading { margin-bottom: 12px; }
.auth-help { margin-top: 24px; }
.content-card-image { height: 240px; object-fit: cover; }
.event-summary-muted { opacity: 0.7; }
.form-toggle-row { gap: 12px; }
.cursor-pointer { cursor: pointer; }
.compact-action-row { gap: 8px; }
.moderation-action { min-width: 92px; }
.form-image-preview { max-height: 240px; object-fit: cover; }
.reorder-handle-column { width: 36px; }
.carousel-image-column { width: 140px; }
.carousel-active-column { width: 80px; }
.quicklink-active-column { width: 60px; }
.quicklink-actions-column { width: 170px; }
.carousel-list-thumbnail { width: 120px; height: 60px; object-fit: cover; border-radius: 3px; }
.member-name-column { width: 18%; }
.member-email-column { width: 22%; }
.member-address-column { width: 24%; }
.member-status-column { width: 11%; }
.member-role-column { width: 14%; }
.dashboard-item-thumbnail { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; }
.event-submission-preview { max-height: 160px; max-width: 240px; object-fit: cover; }
.pet-directory-image { height: 160px; object-fit: cover; }
.pet-card-image { height: 220px; object-fit: cover; cursor: pointer; }
.pet-detail-image { width: 100%; max-height: 300px; object-fit: cover; }
.signup-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.carousel-focal-preview {
  position: relative; width: 100%; aspect-ratio: 12 / 5;
  background: #1A1612 center 50% / cover no-repeat;
  border-radius: 4px; overflow: hidden;
}
.pin-delete-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.pin-hidden-label { color: #888; }
.map-pin-swatch {
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid #999;
  vertical-align: middle; background: #2E5339;
}
/* Fixed MapPin palette; core.tests_csp_strict_styles pins these to the model. */
.map-pin-swatch--green { background: #2E5339; }
.map-pin-swatch--gold { background: #A47E3B; }
.map-pin-swatch--sage { background: #8FA68A; }
.map-pin-swatch--terracotta { background: #C97C5D; }
.map-pin-swatch--ink { background: #1F1B14; }
.map-pin-swatch--paper { background: #FAF7F2; }
.map-pin-swatch--red { background: #B23B3B; }
.map-pin-swatch--creek { background: #4A7BA8; }
.map-pin-swatch--plum { background: #7A5478; }
.map-pin-swatch--autumn { background: #D88C3C; }
.progress.wir-dropzone-progress { height: 6px; }
.progress.wir-dropzone-progress .progress-bar { width: 0; }

.contact-honeypot {
  position: absolute; left: -10000px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Audience (members-only) panel -----------------------------
   Sits at the top of the post and event create/edit forms. New content
   defaults to members-only (owner decision 2026-09-15), so the current
   audience is stated as a badge rather than left implicit in a checkbox. */
.visibility-panel {
  border: 1px solid var(--rule, #d8d1c4);
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem 1rem;
}
.visibility-panel__row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.visibility-panel__label { margin-right: 0.15rem; }
.visibility-panel__help { display: block; margin-top: 0.5rem; }
/* The toggle's label says what the switch does; this says what the item
   currently IS, so 'Members only [Public]' cannot be misread. */
.visibility-panel__state { align-items: center; display: inline-flex; gap: 0.4rem; margin-left: auto; }
.visibility-panel__state-caption { color: var(--ink-soft, #5f5a52); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.visibility-state { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1; padding: 0.3em 0.55em; border-radius: 0.25rem; }
/* Measured against their own fills at 0.72rem/700, which needs 4.5:1:
   white on #17a2b8 was only 3.04:1. #0f6f7d is 5.85:1 and the green is
   4.81:1. This is the badge every author sees by default. */
.visibility-state--members { background: var(--visibility-members-bg); color: var(--visibility-members-ink); }
.visibility-state--public { background: var(--visibility-public-bg); color: var(--visibility-public-ink); }

/* Field auto-save status (post-editor-autosave.js). Empty until a save
   starts; "saved" fades out, errors stay until the next change. */
.autosave-status {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-left: 0.5rem;
  opacity: 1;
  transition: opacity 600ms ease-out;
}
.autosave-status:empty { display: none; }
.autosave-status--error { color: var(--danger); font-weight: 600; }
.autosave-status--unconfirmed { color: var(--danger); font-weight: 600; }
.autosave-status--confirming { font-style: italic; }
.autosave-status--fading { opacity: 0; }
/* The stored audience is unknown after a timed-out auto-save (BR-20260929
   AC35): the badge and the switch show neither state. */
.visibility-state--unconfirmed { background: var(--paper); border: 1px dashed var(--ink-soft); color: var(--ink); }
.visibility-panel .custom-toggle input:indeterminate + .custom-toggle-slider { background: var(--rule); }
.visibility-panel .custom-toggle input:indeterminate + .custom-toggle-slider::before { transform: translateX(10px); }
.visibility-panel__autosave { flex-basis: 100%; margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .autosave-status { transition: none; }
}