/* Shared reading components. Page files may compose them, not redefine their theme. */
/* Catalogue and story cards: photography, uncropped metadata, then one divider. */
.beetle-card,.content-card {
 display:flex; flex-direction:column; height:100%; min-width:0;
 background:transparent; border:0; border-bottom:1px solid var(--editorial-line); border-radius:0;
}
.beetle-card { display:grid; grid-template-columns:minmax(0,1fr) 44px; grid-template-rows:auto minmax(68px,auto) 1fr; column-gap:8px; }
.beetle-card .card-media { display:contents; }
.beetle-card .card-media > a { grid-column:1 / -1; grid-row:1; display:block; aspect-ratio:1; background:var(--editorial-white); }
.beetle-card .card-media img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; }
.content-card .card-media { position:relative; flex-shrink:0; aspect-ratio:16 / 10; background:var(--editorial-white); }
.content-card .card-media img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:var(--editorial-paper); }
.content-card .card-media > a { position:absolute; inset:0; display:block; }
.family-card .card-media { aspect-ratio:1; }
.family-card .card-media img { object-fit:contain; }
.beetle-card .card-body,.content-card .card-body { display:flex; flex-direction:column; flex:1; min-width:0; padding:1rem 0 1.25rem; }
.beetle-card .card-title,.content-card .card-title { font-size:clamp(1.25rem,1.15rem + .3vw,1.375rem); font-weight:500; line-height:1.5; margin-bottom:.4rem; overflow-wrap:anywhere; }
.beetle-card .card-title { min-height:2.8em; margin:0 0 4px; font-size:20px; line-height:1.4; }
.beetle-card .card-body { grid-column:1 / -1; grid-row:3; padding:8px 0 20px; }
.beetle-card .card-title a,.content-card .card-title a { color:var(--editorial-ink); text-decoration:none; }
.beetle-card .card-title a:hover,.content-card .card-title a:hover { color:var(--editorial-forest); text-decoration:underline; }
.beetle-card .card-sci { font-size:17px; min-height:0; margin:0 0 12px; line-height:1.5; overflow-wrap:anywhere; }
.beetle-card .card-classification { min-height:1.5em; margin:0 0 6px; font-size:13px; line-height:1.5; color:var(--editorial-muted); overflow-wrap:anywhere; }
/* Reserve one shared status row, including on cards without badges. */
.beetle-card .card-badges { grid-column:1; grid-row:2; align-self:center; display:flex; flex-wrap:wrap; align-items:center; gap:4px; max-width:100%; padding:8px 0; }
.beetle-card .card-meta { display:grid; gap:.3rem; font-size:.82rem; color:var(--editorial-muted); margin-bottom:1rem; }
.beetle-card .card-meta > div { display:flex; align-items:baseline; gap:.45rem; }
.beetle-card .card-meta dt { min-width:4.5em; color:var(--editorial-muted); font-weight:500; }
.beetle-card .card-meta dd { margin:0; color:var(--editorial-ink); overflow-wrap:anywhere; }
.beetle-card .card-footer-actions { margin-top:auto; padding-top:8px; }
.content-card .card-summary { color:var(--editorial-muted); font-size:1rem; overflow-wrap:anywhere; }
.content-card .card-meta { margin-top:auto; padding-top:1rem; color:var(--editorial-muted); font-size:.82rem; }
/* Tags communicate a real category or status; keep words intact and allow wrapping. */
.tag,.filter-chip { display:inline-flex; align-items:center; gap:.35rem; max-width:100%; min-width:0; border:1px solid var(--editorial-line); border-radius:2px; background:transparent; color:var(--editorial-muted); font-weight:500; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.tag { font-size:.75rem; padding:.22rem .6rem; }
.tag-forest { color:var(--editorial-forest); }
.tag-amber { color:var(--amber-text); }
.tag-earth { color:var(--earth-800); }
.tag-solid { color:var(--editorial-forest); background:var(--surface-sage); border-color:var(--editorial-forest); }
.pending-text { color:var(--editorial-muted); font-style:italic; }
/* Filters */
.filter-panel { background:var(--surface-sage); border:0; padding:16px; }
.filter-group { padding:1rem 0; border-bottom:1px solid var(--editorial-line); }
.filter-group:first-of-type { padding-top:0; }
.filter-group:last-of-type { border-bottom:0; padding-bottom:0; }
.filter-group > legend,.filter-group > .filter-legend { float:none; width:auto; margin-bottom:.65rem; color:var(--editorial-muted); font-size:.8rem; font-weight:500; }
.chip-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.filter-chip { padding:.1rem .25rem .1rem .8rem; font-size:.82rem; }
.filter-chip .chip-label { color:var(--editorial-muted); }
.filter-chip .chip-remove { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; color:var(--editorial-forest); background:transparent; text-decoration:none; font-size:.7rem; }
.filter-chip .chip-remove:hover { background:var(--surface-sage); }
/* Both server and client pagination use the same control family. */
.pagination { --bs-pagination-color:var(--editorial-ink); --bs-pagination-bg:var(--editorial-white); --bs-pagination-disabled-bg:transparent; --bs-pagination-focus-box-shadow:none; gap:.3rem; flex-wrap:wrap; }
.pagination .page-link { display:grid; place-items:center; min-width:44px; min-height:44px; border:1px solid var(--editorial-line); border-radius:2px; color:var(--editorial-ink); }
.pagination .page-link:hover { background:var(--surface-sage); }
.pagination .page-item.active .page-link { background:var(--editorial-forest); border-color:var(--editorial-forest); color:var(--editorial-white); }
.pagination .page-item.disabled .page-link { color:var(--editorial-muted); opacity:.6; }
.list-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; border-top:1px solid var(--editorial-line); padding-top:24px; margin-top:32px; }
.list-pagination-status { flex-basis:100%; text-align:center; margin:0; color:var(--editorial-muted); font-size:14px; }
.list-pagination label { display:flex; align-items:center; gap:8px; font-size:14px; }
.list-pagination .form-select { width:auto; }
[data-page-list] > [hidden] { display:none !important; }
[data-page-list],.table-wrap,.table-responsive { scroll-margin-top:calc(var(--header-h) + 24px); }
/* Empty, loading, legal and content guidance */
.state-block { text-align:left; padding:clamp(2.5rem,6vw,4.5rem) 0; background:transparent; border:0; border-radius:0; }
.state-block .state-icon,.state-icon { font-size:1.5rem; color:var(--editorial-muted); margin-bottom:.75rem; }
.state-block h2,.state-block h3 { margin-bottom:.5rem; }
.state-block p { max-width:46ch; margin:0 0 1.5rem; }
.care-facts,.legal-notice,.credibility-note { border:0; border-left:2px solid var(--editorial-line); padding:1.1rem 1.35rem; border-radius:0; background:var(--surface-sage); }
.legal-notice,.credibility-note { background:var(--surface-ochre); border-left-color:var(--editorial-amber); }
.care-facts dl { display:grid; grid-template-columns:minmax(5em,auto) minmax(0,1fr); gap:.7rem 1rem; margin:0; }
.care-facts dt { color:var(--editorial-muted); font-weight:500; font-size:.875rem; min-width:0; }
.care-facts dd { margin:0; color:var(--editorial-ink); font-size:.9rem; min-width:0; overflow-wrap:anywhere; }
.legal-notice h3,.credibility-note h3 { font-size:1.125rem; margin-bottom:.6rem; }
.legal-notice ul { margin:0; padding-left:1.2rem; }
.legal-notice li,.credibility-note p { font-size:.9rem; color:var(--editorial-muted); margin-bottom:.35rem; }
.legal-notice li:last-child,.credibility-note p:last-child { margin-bottom:0; }
/* Category and region photography */
.category-tile { display:flex; flex-direction:column; height:100%; min-width:0; border-bottom:1px solid var(--editorial-line); border-radius:0; text-decoration:none; }
.category-tile img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.category-tile .tile-overlay { display:flex; flex-direction:column; gap:.25rem; padding:1rem 0; overflow-wrap:anywhere; }
.category-tile .tile-name { color:var(--editorial-ink); font:500 1.25rem/1.4 var(--font-heading); }
.category-tile:hover .tile-name { text-decoration:underline; text-underline-offset:.2em; }
.category-tile .tile-latin { color:var(--editorial-muted); font:italic .875rem/1.5 var(--font-serif); }
.region-tile .tile-count { color:var(--editorial-muted); font-size:.82rem; }
/* Account and favorites */
.auth-card { max-width:480px; margin-inline:auto; padding:clamp(24px,4vw,40px); border:1px solid var(--editorial-line); border-radius:2px; background:var(--editorial-white); }
.auth-card > h1 { font-size:clamp(26px,3vw,32px); font-weight:500; }
.auth-divider { display:flex; align-items:center; gap:.75rem; margin:1.5rem 0; color:var(--editorial-muted); font-size:.85rem; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--editorial-line); }
.favorite-toggle { display:inline-flex; align-items:center; gap:.4rem; }
.favorite-form { display:inline; }
.favorite-toggle > span:empty { display:none; }
.favorite-toggle > span:not(.visually-hidden):not(:empty) { min-inline-size:4em; }
.favorite-toggle > .bi { flex-shrink:0; }
.card-favorite { position:absolute; top:.6rem; right:.6rem; z-index:2; }
.beetle-card .card-favorite { position:static; grid-column:2; grid-row:2; align-self:center; justify-self:end; margin:0; }
.card-favorite .favorite-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; min-height:44px; padding:0; border:1px solid var(--editorial-line); border-radius:2px; background:var(--editorial-white); color:var(--editorial-forest); }
.card-favorite .favorite-toggle:hover { background:var(--surface-sage); }
.btn-favorited,.card-favorite .btn-favorited { background:var(--forest-gold); border-color:var(--forest-gold); color:var(--forest-night); }
.btn-favorited:hover,.card-favorite .btn-favorited:hover { background:var(--amber-300); border-color:var(--amber-300); color:var(--forest-night); }
.favorite-toggle[aria-busy="true"] { opacity:.6; pointer-events:none; }
.favorite-entry { display:flex; flex-direction:column; height:100%; border-top:0; padding-top:12px; }
.favorite-meta { margin:.5rem 0 0; border-top:1px solid var(--editorial-line); padding-top:12px; color:var(--editorial-muted); font-size:13px; text-align:right; }
/* Native reading sheets and tables */
.card { --bs-card-bg:var(--editorial-white); --bs-card-border-radius:2px; --bs-card-border-color:var(--editorial-line); box-shadow:none; }
.card-header { background:var(--surface-sage); border-bottom:1px solid var(--editorial-line); }
.page-head { border-bottom:1px solid var(--editorial-line); padding-bottom:20px; }
.table { --bs-table-bg:var(--editorial-white); --bs-table-color:var(--editorial-ink); --bs-table-border-color:var(--editorial-line); --bs-table-striped-bg:var(--surface-sage); --bs-table-hover-bg:var(--surface-sage); }
.table-light { --bs-table-bg:var(--editorial-white); --bs-table-color:var(--editorial-ink); --bs-table-border-color:var(--editorial-line); }
.card .table > thead { border-bottom:1px solid var(--editorial-line); }
.card .table th { font-size:14px; font-weight:500; color:var(--editorial-muted); }
.about-atlas { overflow-wrap:anywhere; }
/* Related image roles are reused by Razor and dynamically inserted search results. */
.image-specimen { aspect-ratio:1; object-fit:contain; }
.species-result-image { width:28px; height:28px; flex:0 0 28px; object-fit:contain; }
.text-caption { font-size:.8125rem; color:var(--editorial-muted); }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:575.98px) {
 .beetle-card .card-title { font-size:16px; }
 .beetle-card .card-sci { font-size:14px; }
 .auth-card { width:100%; padding:24px 20px; }
 .card-favorite .favorite-toggle { width:36px; height:36px; min-height:36px; font-size:16px; }
 .list-pagination { gap:8px; } .list-pagination .btn { padding-inline:12px; }
}

/* Author identity accompanies content on every page. */
.author-name { display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.admin-badge { display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; font-weight:500; line-height:1.5; padding:.12rem .5rem; border-radius:2px; background:transparent; color:var(--editorial-muted); border:1px solid var(--editorial-line); overflow-wrap:anywhere; }

/* User-defined tag colors are an accent; their text keeps paper-theme contrast. */
.tag-data { display:inline-flex; align-items:center; max-width:100%; padding:.2rem .55rem; border-left:3px solid var(--tag-color,var(--editorial-line)); border-radius:0; background:transparent; color:var(--editorial-ink); font-size:.8125rem; font-weight:500; white-space:normal; overflow-wrap:anywhere; }
.author-avatar-sm,.author-avatar-md,.author-avatar-lg { display:block; flex-shrink:0; border-radius:50%; object-fit:cover; }
.author-avatar-sm { width:24px; height:24px; }
.author-avatar-md { width:44px; height:44px; }
.author-avatar-lg { width:80px; height:80px; border:1px solid var(--editorial-line); }

.text-excerpt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Surface roles: one reading sheet per content group, not alternating card colors.
   Low specificity lets page modules retain their existing grid and control geometry. */
body:not(.forest-home) :where(.catalogue-grid,.article-reading-list,.faq-index .list-group,.admin-section,.c-panel,.my-share-list,.review-list,.member-profile .tab-content) {
 background:var(--editorial-white); padding:clamp(12px,2vw,24px);
}
body:not(.forest-home) :where(.content-card,.favorite-entry,.profile-species-card) { background:var(--editorial-white); }
body:not(.forest-home) :where(.content-card .card-body,.profile-species-caption) { padding-inline:16px; }
body:not(.forest-home) :where(.state-block,.c-empty) { background:var(--editorial-white); padding-inline:20px; }
body:not(.forest-home) :where(.toc,.record-filters,.share-toolbar,.profile-heading,.c-hero-note,.c-original) { background:var(--surface-sage); padding:16px; }
body:not(.forest-home) :where(.article-copy,.share-comments,article:has(> .share-body),article:has(> .species-section)) { background:var(--editorial-white); padding:clamp(16px,3vw,32px); }
body:not(.forest-home) :where(.faq-guidance,.c-review-note,.c-diff > div:first-child) { background:var(--surface-sage); }
body:not(.forest-home) :where(.article-editorial-note,.faq-warning,.faq-caution,.c-review-internal,.c-permission-required) { background:var(--surface-ochre); }
body:not(.forest-home) :where(.c-diff > div:last-child) { background:var(--surface-ochre); }
body:not(.forest-home) :where(.table thead th,table.data-table th,.article-timeline th) { background:var(--surface-sage); }
body:not(.forest-home) :where(table.data-table,.faq-detail,.about-atlas) { background:var(--editorial-white); }