/* Shared layout, with species-specific content priorities supplied by detail.php. */
#fish-five .f-detail{color:#c4d6e1;font-size:13px;line-height:1.7}
#fish-five .f-detail h1{font-size:28px;line-height:1.2;margin:0 0 5px;color:#f2f7fa}
#fish-five .f-detail h2{font-size:15px;color:#e9f4f9;margin:0 0 8px}
#fish-five .f-detail p{margin:6px 0;white-space:pre-line}
#fish-five .f-detail a{color:#8bd8e3;text-decoration:none}
#fish-five .f-detail-breadcrumb{display:flex;gap:12px;font-size:12px;padding:18px 0}
#fish-five .f-detail-breadcrumb span{color:#8ba9bc}
#fish-five .f-detail-lead{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;background:#213e51;border-radius:12px;padding:22px;align-items:center}
#fish-five .f-detail-portrait{margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at center,#3b6174,#213e51 75%);border-radius:10px;min-width:0}
#fish-five .f-detail-portrait img{width:100%;height:auto;max-height:330px;object-fit:contain}
#fish-five .f-detail-portrait figcaption{text-align:center;color:#9dbdcc;font-size:11px}
#fish-five .f-latin{font-size:13px;font-style:italic;color:#9dbdce}
#fish-five .f-detail-tagline{color:#e0edf2}
#fish-five .f-detail-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px;margin:16px 0}
#fish-five .f-detail-facts dt{font-size:11px;color:#8fb0c4}
#fish-five .f-detail-facts dd{margin:2px 0 0;font-size:12px;color:#e1edf3;line-height:1.5}
#fish-five .f-detail-caution{color:#e4d4aa;border-left:2px solid #9a895d;padding-left:10px;font-size:12px}
#fish-five .f-detail-actions{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:16px;font-size:12px}
#fish-five .f-detail-actions .f-add{position:static;font-size:12px;padding:0;background:transparent;border:0;color:#75d6de}
#fish-five .f-detail-identify{margin:20px 0;padding:0 4px}
#fish-five .f-detail-care{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#fish-five .f-detail-care>div{padding:16px 18px;background:#213e51;border-radius:10px}
#fish-five .f-detail-care>div:nth-child(even){background:#254655}
#fish-five .f-detail-related,#fish-five .form-section{margin:24px 0}
#fish-five .f-related-reason{font-size:11px;color:#a5bfce;line-height:1.6}
#fish-five .f-detail-extra details,#fish-five .f-detail-sources{padding:12px 0;border-top:1px solid #355164;margin-top:8px}
#fish-five .f-detail summary{cursor:pointer;color:#acd0de}
#fish-five .f-detail-sources span{font-size:11px;color:#8ca9ba}
#fish-five .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#fish-five .form-card{background:#213e51;padding:14px;border-radius:10px}
#fish-five .form-card img{width:100%;height:150px;object-fit:contain}
#fish-five .form-card h3{font-size:14px;margin:6px 0}
#fish-five .form-card p{font-size:12px}
#fish-five .f-detail .f-meta{grid-template-columns:minmax(0,1fr) auto}
@media(max-width:900px){#fish-five .f-detail-lead{gap:18px;padding:18px}#fish-five .f-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){#fish-five .f-detail-lead{grid-template-columns:1fr;padding:16px;gap:16px}#fish-five .f-detail-portrait img{max-height:230px}#fish-five .f-detail h1{font-size:25px}#fish-five .f-detail-care{grid-template-columns:1fr}#fish-five .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#fish-five .f-detail-related .f-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Long measurement caveats must not turn one narrow metric into a tall column. */
#fish-five .f-detail-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
#fish-five .f-detail-facts>div:first-child{grid-column:1/-1;display:grid;grid-template-columns:80px minmax(0,1fr);gap:8px;align-items:baseline}
#fish-five .f-detail-facts>div:first-child dd{margin:0}
#fish-five .f-detail[data-detail-profile="forms"] .form-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
#fish-five .f-detail[data-detail-profile="forms"] .form-card{padding:10px}
#fish-five .f-detail[data-detail-profile="forms"] .form-card img{height:100px}
@media(max-width:1100px){#fish-five .f-detail[data-detail-profile="forms"] .form-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){#fish-five .f-detail[data-detail-profile="forms"] .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#fish-five .f-detail-care{margin-top:20px}