/* OttoFish — Compatibility page styles
   Used by: /sovmestimost/*/index.html (15 pages)
   Requires: common.css
   =========================================== */

/* Title */
h1{font-family:'Unbounded',sans-serif;font-weight:700;font-size:clamp(28px,5vw,44px);line-height:1.12;letter-spacing:-.03em;color:var(--navy);margin:18px 0 10px}
.lead{margin-bottom:8px}

/* Verdict box */
.verdict-box{margin:24px 0 36px;padding:28px 32px;border-radius:var(--radius);border-left:5px solid;display:flex;gap:18px;align-items:flex-start}
.verdict-box.bad{background:#fdecea;border-color:var(--bad)}
.verdict-box.warn{background:#fdf6e6;border-color:var(--warn)}
.verdict-box.good{background:#e9f9f1;border-color:var(--ok)}
.verdict-icon{font-size:36px;flex-shrink:0;line-height:1}
.verdict-body h2{font-family:'Unbounded',sans-serif;font-weight:600;font-size:20px;margin-bottom:6px}
.verdict-box.bad .verdict-body h2{color:var(--bad)}
.verdict-box.warn .verdict-body h2{color:var(--warn)}
.verdict-box.good .verdict-body h2{color:var(--ok)}
.verdict-body p{color:var(--ink-soft);font-size:15.5px}

/* Fish pair cards */
.fish-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0}
@media(max-width:600px){.fish-pair{grid-template-columns:1fr}}
.fish-link{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 16px;transition:border-color .2s,transform .2s}
.fish-link:hover{border-color:var(--teal);transform:translateY(-2px)}
.fish-link picture,.fish-link img{width:80px;height:54px;border-radius:10px;object-fit:cover;flex-shrink:0;display:block}
.fish-link .fl-info{display:flex;flex-direction:column;gap:2px}
.fish-link .fl-name{font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;color:var(--navy)}
.fish-link .fl-lat{font-size:13px;font-style:normal;letter-spacing:.02em;color:var(--muted)}

/* Params table */
.params-table{width:100%;border-collapse:collapse;margin:16px 0 20px}
.params-table th,.params-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);font-size:15px}
.params-table th{font-weight:600;color:var(--ink);background:var(--bg-deep);font-size:14px}
.params-table td{color:var(--ink-soft)}
.params-table tr:last-child td{border-bottom:none}

/* Alternatives grid */
.alt-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:600px){.alt-grid{grid-template-columns:1fr}}
.alt-card{background:var(--bg-deep);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.alt-card h4{font-family:'Unbounded',sans-serif;font-weight:600;font-size:15px;color:var(--navy);margin-bottom:6px}
.alt-card a{color:var(--teal-deep);font-weight:500}
.alt-card a:hover{text-decoration:underline}
.alt-card p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* FAQ accordion */
.faq{margin-top:14px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:600;cursor:pointer;color:var(--ink);font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::after{content:"+";font-size:20px;color:var(--teal);font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .answer{padding:10px 0 4px;color:var(--ink-soft);font-size:15px}

em{font-style:normal}