/* Compare page body only. Same look as the new Breeders, States and profile pages. */
.cp27 { --cp-green:#143c2c; --cp-mint:#e9f2e9; --cp-line:#d7e2da; color:#18181b; background:#fafbf7; }
.cp27-hero { position:relative; isolation:isolate; overflow:hidden; min-height:420px; display:flex; align-items:center; background:#153d2d; }
.cp27-hero__bg { position:absolute; inset:0; z-index:-1; background:url('../img/states-countryside-20260922.png') center 30%/cover no-repeat; }
.cp27-hero__bg:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(9,42,24,.85),rgba(9,42,24,.55) 38%,rgba(9,42,24,.1) 70%); }
.cp27-hero__content { width:100%; padding:40px 7%; }
.cp27-kicker { margin:0 0 14px; color:#e6f1e7; font-size:12px; font-weight:800; letter-spacing:.15em; line-height:1; }
.cp27-hero h1 { margin:0 0 12px; color:#fff; font:600 clamp(40px,4.4vw,68px)/1.05 Inter,Arial,sans-serif; letter-spacing:-.045em; }
.cp27-hero__sub { margin:0; max-width:620px; color:#fff; font-size:20px; line-height:1.5; }
.cp27-body { padding:40px 0 56px; }
.cp27-wrap { width:min(1240px,calc(100% - 64px)); margin-inline:auto; }
.cp27-grid { display:grid; gap:18px; align-items:stretch; }
.cp27-grid--1 { grid-template-columns:minmax(0,420px); }
.cp27-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cp27-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cp27-card { display:flex; flex-direction:column; padding:24px; background:#fff; border:1px solid var(--cp-line); border-radius:10px; box-shadow:0 6px 20px rgba(20,60,44,.06); min-width:0; }
.cp27-card__head { display:flex; align-items:center; gap:14px; padding-bottom:18px; border-bottom:1px solid var(--cp-line); }
.cp27-grade { flex:none; width:58px; min-width:58px; height:58px; border-radius:8px; font-size:24px; font-weight:800; line-height:58px; text-align:center; padding:0; }
.cp27-card__name { min-width:0; }
.cp27-card__name a { display:block; color:var(--cp-green); font:600 20px/1.25 Inter,Arial,sans-serif; letter-spacing:-.02em; text-decoration:none; overflow-wrap:anywhere; }
.cp27-card__name a:hover { text-decoration:underline; }
.cp27-card__name span { display:block; margin-top:4px; font-size:14px; color:#18181b; }
.cp27-stats { margin:6px 0 20px; }
.cp27-stat { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:11px 0; border-bottom:1px solid #e6ebe5; }
.cp27-stat dt { font-size:14px; color:#18181b; }
.cp27-stat dd { margin:0; font-size:18px; font-weight:700; color:#18181b; font-variant-numeric:tabular-nums; white-space:nowrap; }
.cp27-stat dd.is-bad { color:#b91c1c; }
.cp27-stat dd.is-good { color:#15803d; }
.cp27-btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 24px; border-radius:6px; background:var(--cp-green); color:#fff!important; font-size:15px; font-weight:600; text-decoration:none; }
.cp27-btn:hover { background:#216148; }
.cp27-btn--block { margin-top:auto; width:100%; }
.cp27-card--add { align-items:center; justify-content:center; text-align:center; gap:8px; border:2px dashed #a9c2ad; background:#f4f8f2; box-shadow:none; color:#18181b; text-decoration:none; min-height:320px; }
.cp27-card--add:hover { background:var(--cp-mint); border-color:#5f8d68; }
.cp27-add__plus { width:56px; height:56px; border-radius:50%; background:var(--cp-green); color:#fff; font-size:32px; line-height:56px; }
.cp27-card--add strong { font-size:19px; color:var(--cp-green); }
.cp27-card--add span:last-child { max-width:240px; font-size:14px; line-height:1.5; }
.cp27-empty { max-width:640px; margin:0 auto; padding:40px 32px; text-align:center; background:#fff; border:1px solid var(--cp-line); border-radius:10px; }
.cp27-empty h2 { margin:0 0 10px; color:var(--cp-green); font:600 30px/1.2 Inter,Arial,sans-serif; letter-spacing:-.03em; }
.cp27-empty p { margin:0 0 22px; font-size:16px; color:#18181b; }
.cp27-note { margin:28px 0 0; text-align:center; font-size:15px; color:#18181b; }
.cp27-note a { color:var(--cp-green); font-weight:600; }
.cp27 :is(a,button):focus-visible { outline:3px solid #568b66; outline-offset:3px; }
@media(max-width:900px) {
 .cp27-grid--1,.cp27-grid--2,.cp27-grid--3 { grid-template-columns:1fr; }
 .cp27-card--add { min-height:180px; }
}
@media(max-width:700px) {
 .cp27-hero { min-height:320px; }
 .cp27-hero__content { padding:40px 20px; }
 .cp27-hero h1 { font-size:40px; }
 .cp27-hero__sub { font-size:16px; }
 .cp27-wrap { width:calc(100% - 32px); }
 .cp27-body { padding:24px 0 40px; }
}
body:has(.cp27){display:flex;flex-direction:column;min-height:100vh}body:has(.cp27)>main{flex:1 0 auto;display:flex;flex-direction:column}body:has(.cp27) .cp27{flex:1 0 auto}