/* Fish Match: logo blue, warm orange, and quiet blue-tinted surfaces. */
:root{--blue:#0b5ed7;--teal:var(--blue);--orange:#f8790b;--ink:#12264a;--muted:#596b85;--line:#dce5f2;--brand-tint:#edf4ff;--orange-tint:#fff3e7}
body{background:#f8faff}
.site-header{background:#fff;border-bottom:1px solid #e4ebf7}
.header{background:transparent}
.search-wrap{background:#fff;border-color:#b8cef0}
.shuffle,.pill{color:#0b5ed7;background:#eaf2ff}
.section-icon,.eyebrow,.profile-panel dt,.filter-toggle,.add-more{color:#0b5ed7}
.notice.success{background:#edf4ff;color:#174b9c}
.fish-action.is-added{color:#0b5ed7;background:#eaf2ff;border-color:#b8cef0}
.care-spotlight{background:#edf4ff;border-color:#c8daf5;border-left-color:#0b5ed7}
.care-spotlight>span,.care-spotlight>p,.care-spotlight.level-beginner>strong{color:#174b9c}
.care-spotlight.level-intermediate{background:#fff3e7;border-color:#f8d6b7;border-left-color:#f8790b}
.care-spotlight.level-intermediate>strong{color:#a64c05}
.recommendation-vote[value="up"],.recommendation-vote[value="up"]:hover:not(:disabled),.recommendation-vote.is-selected[value="up"]{background:#0d5dd6;border-color:#0d5dd6;color:#fff}
.recommendation-vote[value="down"],.recommendation-vote[value="down"]:hover:not(:disabled),.recommendation-vote.is-selected[value="down"]{background:#f16e13;border-color:#f16e13;color:#12264a}
.recommendation-vote:hover:not(:disabled){box-shadow:inset 0 0 0 2px #ffffffb3}
.comment-choice-options label.comment-choice-up{background:#0d5dd6;border-color:#0d5dd6;color:#fff}
.comment-choice-options label.comment-choice-down{background:#f16e13;border-color:#f16e13;color:#12264a}
.comment-vote.positive{background:#edf4ff;color:#0b5ed7}
.pros{background:#edf4ff}.cons{background:#fff3e7}.pros-cons h2 span{background:#dceaff;color:#0b5ed7}.cons h2 span{background:#ffe0c3;color:#a64c05}
.fish-profile{gap:28px 34px;align-items:start}
.detail-media,.detail-intro{min-width:0}
.fish-profile .detail-photo img{aspect-ratio:1.3;border-radius:17px}
.detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:15px}
.detail-actions form{margin:0;min-width:0}
.detail-actions .fish-action{width:100%;height:100%;min-height:46px;padding:12px 21px;gap:9px;font-size:14px;border-radius:10px}
.detail-actions .detail-compare{background:#edf4ff;border-color:#b8cef0;color:#0d5dd6}
.detail-actions .detail-compare:hover:not(:disabled){background:#dceaff;border-color:#0d5dd6}
.detail-actions .detail-compare.is-added{background:#edf4ff;border-color:#b8cef0;color:#0b5ed7}
.detail-actions .detail-tank{border-color:#f5b780;color:#a64c05;background:#fff7ef}
.detail-actions .detail-tank:hover:not(:disabled){background:#ffead5;border-color:#f8790b}
.detail-actions .fish-action svg{width:18px;height:18px;flex-shrink:0}
.fish-profile .detail-intro h1{font-size:clamp(30px,2.5vw,39px);line-height:1.18;margin-top:12px;overflow-wrap:anywhere}
.fish-profile .detail-intro>.scientific{margin:10px 0 16px}
.fish-profile .detail-intro>p:not(.scientific){line-height:1.7;margin:0;color:#4e6280}
.fish-profile .care-spotlight{margin:22px 0 14px;padding:18px 22px}
.fish-profile .fish-recommendation{background:white;padding:18px 22px;margin:0}
.fish-profile .fish-recommendation>p{margin-bottom:14px}
.profile-at-glance{grid-column:1/-1;display:grid;grid-template-columns:1fr .85fr 1.3fr 1.15fr;border:1px solid var(--line);background:#fff;border-radius:14px;padding:20px 0;gap:0}
.profile-at-glance>div{display:flex;align-items:center;gap:15px;padding:0 23px;min-width:0}
.profile-at-glance>div+div{border-left:1px solid #d1dff3}
.profile-at-glance svg{width:31px;height:31px;color:var(--blue);flex-shrink:0}
.profile-at-glance strong{font-size:17px;line-height:1.35;display:block;overflow-wrap:anywhere}
.profile-at-glance small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.profile-workspace{grid-column:1/-1;display:grid;grid-template-columns:minmax(230px,.29fr) minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.profile-workspace .profile-panel{border-color:var(--line);border-radius:12px;background:white;padding:22px}
.profile-workspace .profile-panel h2{font-size:22px;line-height:1.3;letter-spacing:-.5px;margin:0 0 19px;gap:10px}
.profile-workspace .profile-panel dt{font-size:13px;margin-bottom:5px;color:#0b5ed7}
.profile-workspace .profile-panel dd{font-size:14px;line-height:1.65;color:#526581;overflow-wrap:anywhere;white-space:normal}
.profile-workspace .profile-panel dl>div+div{margin-top:13px;padding-top:13px;border-color:#e6edf7}
.profile-workspace .profile-panel dd{white-space:normal}
.profile-reader{border:1px solid var(--line);border-radius:14px;background:white;min-width:0;overflow:hidden}
.profile-tabs{display:flex;flex-wrap:wrap;gap:4px 5px;border-bottom:1px solid var(--line);padding:12px 14px;background:#fbfdff}
.profile-tabs>a{display:inline-flex;align-items:center;gap:6px;border-radius:7px;padding:9px 11px;font-size:12px;font-weight:600;color:#526581;line-height:1.4;position:relative;min-height:36px}
.profile-tabs>a:hover{color:#0b5ed7;background:#edf4ff}
.profile-tabs>a[aria-selected="true"]{background:transparent;color:#526581;font-weight:600;border-radius:0;box-shadow:inset 0 -4px #f16e13}
.tab-count{font-size:10px;padding:1px 5px;border-radius:8px;background:#e2ebfa;color:#174b9c}
.profile-content{padding:18px}
.profile-content>[data-profile-panel]+[data-profile-panel]{margin-top:18px}
.profile-content:has([role="tabpanel"])>[data-profile-panel]{margin:0}
.overview-panels{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:16px}
.profile-badge{display:inline-block;background:#edf4ff;color:#174b9c;font-size:12px;font-weight:700;line-height:1.5;padding:3px 8px;border-radius:20px;margin:0 0 5px;white-space:normal}
.profile-badge.safety-caution,.profile-badge.safety-unsafe{background:#fff0de;color:#9c4605}
.profile-workspace .buyer-note{margin:17px 0 0;background:#edf4ff;border:1px solid #d9e7fc;border-radius:10px;padding:17px 19px}
.profile-workspace .buyer-note h2{font-size:16px;margin:0 0 8px;gap:10px;line-height:1.4;color:#174b9c}
.profile-workspace .buyer-note p{font-size:13px;line-height:1.65;color:#526581;margin:0}
.profile-content .user-comments{margin:0;padding:4px 3px;border:0}
.profile-content .comments-heading h2{font-size:22px}
.profile-content .care-note{border:0;padding:0 7px}
.profile-content .care-note h2{margin-top:7px}
.profile-content .pros-cons{gap:15px}
.profile-content .pros-cons>div{padding:20px}
.profile-content .pros-cons h2{font-size:19px;line-height:1.4}
.profile-content .pros-cons li{font-size:14px}
.profile-references{padding:0 7px}
.profile-references ul{display:block}.profile-references li{margin:14px 0}
.fish-profile~.photo-sources{padding-top:4px}
@media(min-width:1000px){
 body{padding-bottom:20px}
 .header{max-width:1380px;padding:10px 30px}
 main:has(.fish-profile){max-width:1380px;padding:24px 30px 35px}
 .bottom-nav{display:none}
 .header>.icon-button{display:none}
 .fish-profile .detail-photo img{aspect-ratio:1.3;min-height:390px}
 .fish-profile .detail-media{position:relative}
 .action-toast{bottom:28px}
}
@media(min-width:701px) and (max-width:1100px){
 .profile-workspace{grid-template-columns:240px minmax(0,1fr)}
 .overview-panels{grid-template-columns:1fr}
 .profile-at-glance>div{padding:0 15px;gap:10px}
 .profile-at-glance strong{font-size:14px}
 .profile-at-glance svg{width:25px;height:25px}
 .detail-actions .fish-action{padding:11px 14px;font-size:13px}
}
@media(max-width:700px){
 .fish-profile{gap:23px}
 .fish-profile .detail-photo img{aspect-ratio:1.25;min-height:0;border-radius:14px}
 .detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
 .detail-actions .fish-action{width:100%;font-size:12px;padding:11px 8px;gap:6px}
 .detail-actions .fish-action svg{width:16px;height:16px}
 .fish-profile .detail-intro h1{font-size:32px}
 .profile-at-glance{grid-template-columns:1fr 1fr;padding:0;border-radius:12px;overflow:hidden}
 .profile-at-glance>div{padding:17px 14px;gap:10px;align-items:flex-start}
 .profile-at-glance>div:nth-child(odd){border-left:0}
 .profile-at-glance>div:nth-child(n+3){border-top:1px solid var(--line)}
 .profile-at-glance strong{font-size:14px}
 .profile-at-glance small{font-size:11px}
 .profile-at-glance svg{width:23px;height:23px}
 .profile-workspace{display:flex;flex-direction:column;gap:16px}
 .identity-panel,.profile-reader{width:100%}
 .profile-workspace .profile-panel{padding:19px}
 .profile-tabs{padding:10px;gap:4px}
 .profile-tabs>a{font-size:11px;padding:8px 9px;min-height:38px}
 .profile-content{padding:12px}
 .overview-panels{grid-template-columns:1fr;gap:13px}
 .profile-content .pros-cons{grid-template-columns:1fr}
 .profile-workspace .profile-panel h2{font-size:21px}
 .profile-content .comments-heading{align-items:flex-start;gap:10px}
 .profile-content .comments-heading h2{font-size:19px}
 .profile-content .comments-heading>.button{padding:10px;font-size:11px}
}

/* The home catalog is fetched in batches, with four cards across on desktop. */
#fish-pagination{text-align:center;padding:28px 0 8px;min-height:95px}
#fish-feed-status{font-size:13px;color:var(--muted);margin:0 0 14px}
#load-more-fish[aria-disabled="true"]{pointer-events:none;opacity:.55}
@media(min-width:1000px){
 main:has(#fish-grid[data-paginated]){max-width:1380px}
 #fish-grid[data-paginated]{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 22px}
 #fish-grid[data-paginated] .fish-card h2{font-size:20px;line-height:1.3}
 #fish-grid[data-paginated] .fish-card p{font-size:13px}
}

/* Keep complete species illustrations visible, including snouts and tail fins. */
.fish-profile .detail-photo img[src*="/assets/tangs/"]{aspect-ratio:auto;min-height:0;height:auto;object-fit:contain}
#fish-grid .fish-card img[src*="/assets/tangs/"]{object-fit:contain;background:#eaf3fb}

/* Standalone profile summaries and full-width page footer sections. */
.fish-profile>.pros-cons{gap:20px;margin:0}
.fish-profile>.pros-cons h2{font-size:20px}
.profile-footer{grid-column:1/-1;min-width:0}
.profile-comments .user-comments{margin:0;border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px}
.profile-disclaimer .care-note{margin:0;padding:20px 0 0}
@media(max-width:700px){.fish-profile>.pros-cons{grid-template-columns:1fr;gap:15px}.profile-comments .user-comments{padding:18px}.profile-comments .comments-heading{align-items:flex-start;gap:10px}.profile-comments .comments-heading h2{font-size:19px}.profile-comments .comments-heading>.button{padding:10px;font-size:11px}}

@media(max-width:700px){.profile-tabs{display:none}.profile-content>[data-profile-panel]+[data-profile-panel]{margin-top:18px}}

/* Responsive image URLs retain the complete tang framing. */
.fish-profile .detail-photo img[data-full-fish]{aspect-ratio:auto;min-height:0;height:auto;object-fit:contain}
#fish-grid .fish-card img[data-full-fish]{object-fit:contain;background:#eaf3fb}

/* Let responsive profile photos retain their source proportions instead of HTML pixel heights. */
.fish-profile .detail-photo img{width:100%;height:auto;aspect-ratio:auto;min-height:0;object-fit:contain}

.desktop-nav .desktop-compat-count{color:#0d5dd6;font-weight:800;margin-left:5px;font-variant-numeric:tabular-nums}