/* ── Layout ── */
.rmsg-page-wrap { max-width: 1280px; margin: 0 auto; padding: 2rem 2.5rem; }
.rmsg-contact-sheet { display: flex; gap: 2rem; align-items: flex-start; }
.rmsg-sidebar { width: 220px; flex-shrink: 0; position: sticky; top: 2rem; }
.rmsg-main { flex: 1; min-width: 0; }
@media (max-width: 768px) {
  .rmsg-contact-sheet { flex-direction: column; }
  .rmsg-sidebar { width: 100%; position: static; }
}

/* ── Cards ── */
.rmsg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px)  { .rmsg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .rmsg-grid { grid-template-columns: 1fr; } }

.rmsg-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; cursor: pointer; transition: box-shadow .15s, transform .15s; display: flex; flex-direction: column; }
.rmsg-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.rmsg-card a { display: block; text-decoration: none; color: inherit; }
.rmsg-card-img { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; }
.rmsg-card-img-placeholder { aspect-ratio: 1/1; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; opacity: 0.18; }
.rmsg-card-body { padding: 0.65rem 0.75rem 0.8rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.rmsg-card-name { font-size: 0.825rem; font-weight: 600; line-height: 1.2; color: #0f172a; }
.rmsg-card-sci  { font-size: 0.7rem; font-style: italic; color: #94a3b8; }
.rmsg-card-meta { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
.rmsg-color-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #e2e8f0; flex-shrink: 0; }
.rmsg-chip { font-size: 0.6rem; color: #64748b; background: #f1f5f9; padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.rmsg-chip-season { color: #0369a1; background: #e0f2fe; }
.rmsg-last-seen { font-size: 0.62rem; color: #94a3b8; margin-top: auto; padding-top: 0.3rem; }
.rmsg-last-seen strong { color: #64748b; }

/* ── Stub cards ── */
.rmsg-stub { background: #f8fafc !important; border-style: dashed !important; border-color: #cbd5e1 !important; }
.rmsg-stub .rmsg-card-name { color: #64748b !important; }
.rmsg-stub .rmsg-card-sci  { color: #cbd5e1 !important; }
.rmsg-stub:hover { box-shadow: 0 2px 8px rgba(0,0,0,.05) !important; transform: translateY(-1px) !important; }

/* ── Sidebar filters ── */
.rmsg-filter-section { margin-bottom: 1.5rem; }
.rmsg-filter-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #94a3b8; margin-bottom: 0.5rem; }
.rmsg-filter-section input[type=text] { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.8rem; box-sizing: border-box; }
.rmsg-filter-section label { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; cursor: pointer; padding: 0.15rem 0; }
.rmsg-active-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; min-height: 1.5rem; }
.rmsg-filter-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: #dbeafe; color: #1d4ed8; font-size: 0.7rem; padding: 2px 8px; border-radius: 12px; cursor: pointer; user-select: none; }
.rmsg-result-count { font-size: 0.75rem; color: #94a3b8; margin-bottom: 0.75rem; }
.rmsg-color-swatch { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #e2e8f0; cursor: pointer; display: inline-block; vertical-align: middle; transition: outline .1s; }
.rmsg-color-swatch.active { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.rmsg-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.25rem; }
.rmsg-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; }
.rmsg-month-btn { font-size: 0.65rem; padding: 0.2rem 0; border: 1px solid #e2e8f0; border-radius: 4px; background: #fff; cursor: pointer; text-align: center; transition: background .1s; }
.rmsg-month-btn.active { background: #e0f2fe; border-color: #7dd3fc; color: #0369a1; font-weight: 600; }

/* ── Species page ── */
.rmsg-hero { position: relative; max-height: 420px; overflow: hidden; border-radius: 12px; margin-bottom: 1.5rem; background: #1e293b; }
.rmsg-hero img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.rmsg-hero-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem 2rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; }
.rmsg-hero-name { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.rmsg-hero-sci  { font-size: 1rem; font-style: italic; opacity: 0.8; margin-top: 0.2rem; }
.rmsg-hero-badges { margin-top: 0.6rem; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rmsg-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: start; }
@media (max-width: 768px) { .rmsg-two-col { grid-template-columns: 1fr; } }
.rmsg-sidebar-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.rmsg-sidebar-box h3 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #94a3b8; margin: 0 0 0.75rem; }
.rmsg-sidebar-box .rmsg-classification-table,
.rmsg-sidebar-box .rmsg-classification-table tr,
.rmsg-sidebar-box .rmsg-classification-table td { border: none !important; background: none !important; }
.rmsg-sidebar-box .rmsg-classification-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.rmsg-sidebar-box .rmsg-classification-table td { padding: 0.25rem 0 !important; vertical-align: top; }
.rmsg-sidebar-box .rmsg-classification-table td:first-child { color: #94a3b8; width: 38%; }
.rmsg-inat-map { width: 100%; height: 240px; border: none; border-radius: 8px; display: block; z-index: 0; }
.rmsg-sighting { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.6rem; }
.rmsg-sighting img { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
.rmsg-sighting-meta { font-size: 0.75rem; }
.rmsg-sighting-place { font-weight: 600; color: #1e293b; }
.rmsg-sighting-info  { color: #94a3b8; margin-top: 0.1rem; }

/* ── Gallery ── */
.rmsg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 6px; margin-top: 1rem; }
.rmsg-gallery-thumb { aspect-ratio: 1/1; object-fit: cover; border-radius: 6px; cursor: pointer; width: 100%; display: block; transition: opacity .1s; }
.rmsg-gallery-thumb:hover { opacity: 0.85; }
.rmsg-gallery-overflow { aspect-ratio: 1/1; background: #1e293b; color: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.rmsg-gallery-overflow:hover { background: #334155; }

/* ── Group page header ── */
.rmsg-group-header { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 2rem 2.5rem; margin-bottom: 2rem; display: flex; gap: 2rem; align-items: flex-start; }
.rmsg-group-icon { width: 80px; height: 80px; border-radius: 10px; background: linear-gradient(135deg, #bfdbfe, #93c5fd); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.rmsg-group-name { font-size: 1.6rem; font-weight: 800; color: #0f172a; }
.rmsg-group-sci  { font-size: 0.9rem; font-style: italic; color: #94a3b8; margin-top: 0.2rem; }
.rmsg-group-parent { font-size: 0.75rem; color: #64748b; margin-top: 0.4rem; }
.rmsg-group-parent a { color: #0ea5e9; text-decoration: none; }
.rmsg-group-desc { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.85; color: #334155; }
.rmsg-group-stats { display: flex; gap: 1.5rem; margin-top: 1rem; }
.rmsg-stat-value { font-weight: 700; font-size: 1rem; color: #0f172a; }
.rmsg-stat-label { font-size: 0.75rem; color: #94a3b8; margin-top: 1px; }

/* ── Breadcrumb ── */
.rmsg-breadcrumb { font-size: 0.8rem; color: #94a3b8; margin-bottom: 1.5rem; }
.rmsg-breadcrumb a { color: #0ea5e9; text-decoration: none; }

/* ── Legend ── */
.rmsg-legend { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; align-items: center; }
.rmsg-legend-item { display: flex; gap: 0.4rem; align-items: center; font-size: 0.72rem; color: #64748b; }
.rmsg-legend-swatch { width: 14px; height: 14px; border-radius: 4px; background: #fff; border: 1px solid #e2e8f0; }
.rmsg-legend-swatch.stub { background: #f8fafc; border-style: dashed; border-color: #cbd5e1; }