/* Compare pop-up + bottom bar (js/compare.js). Plain CSS so it doesn't depend on Tailwind. */
.cmp-btn.cmp-on,.cmp-btn.cmp-on:hover{background:#1e3a8a!important;border-color:#60a5fa!important;color:#dbeafe!important}
.cmp-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#030712;border-top:1px solid #374151;box-shadow:0 -8px 24px rgb(0 0 0/.5);padding:.5rem 1rem calc(.5rem + env(safe-area-inset-bottom))}
.cmp-bar[hidden],.cmp-back[hidden],.cmp-note[hidden]{display:none}
.cmp-in{max-width:72rem;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cmp-sel{flex:1 1 12rem;min-width:0;font-size:.9rem;color:#d1d5db}
.cmp-sel strong{color:#fff}
.cmp-note{flex-basis:100%;order:3;font-size:.85rem;color:#fde68a;margin:0}
.cmp-b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 1rem;border-radius:1rem;border:1px solid #4b5563;background:#1f2937;color:#f3f4f6;font-size:.9rem;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.cmp-b:hover{background:#374151}
.cmp-b:focus-visible,.cmp-scroll:focus-visible,.cmp-dlg:focus-visible{outline:2px solid #34d399;outline-offset:2px}
.cmp-go{background:#10b981;border-color:#10b981;color:#000}
.cmp-go:hover{background:#34d399}
.cmp-go[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.cmp-white{background:#fff;color:#000;border-color:#fff}
.cmp-white:hover{background:#6ee7b7}
body.cmp-pad{padding-bottom:5.5rem}
html.cmp-root{scroll-padding-bottom:6.5rem}

.cmp-back{position:fixed;inset:0;z-index:50;background:rgb(0 0 0/.75);display:flex;align-items:center;justify-content:center;padding:1rem}
.cmp-dlg{background:#111827;color:#fff;border:1px solid #374151;border-radius:1.5rem;width:100%;max-width:64rem;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain;padding:1.25rem}
.cmp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.cmp-head-act{display:flex;align-items:center;gap:.5rem}
.cmp-head h2{font-size:1.4rem;font-weight:700;margin:0}
.cmp-x{font-size:1.5rem;padding:0}
.cmp-diff{color:#a7f3d0;margin:.5rem 0 1rem;font-size:.95rem}
.cmp-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.cmp-t{border-collapse:separate;border-spacing:0;width:100%;font-size:.9rem;table-layout:fixed}
.cmp-t th,.cmp-t td{padding:.65rem .6rem;vertical-align:top;text-align:left;border-top:1px solid #1f2937;overflow-wrap:anywhere}
.cmp-t thead th{border-top:0}
.cmp-t .cmp-corner{width:7.5rem;position:sticky;left:0;z-index:1;background:#111827}
.cmp-t th[scope=row]{position:sticky;left:0;z-index:1;background:#111827;color:#9ca3af;font-weight:600;width:7.5rem}
.cmp-t td,.cmp-t thead th[scope=col]{scroll-snap-align:start;min-width:9rem}
.cmp-tool{display:flex;align-items:center;gap:.6rem;font-size:1.05rem;font-weight:700}
.cmp-tool img{width:36px;height:36px;object-fit:contain;border-radius:.5rem;background:rgb(255 255 255/.05);flex-shrink:0}
.cmp-tool img.cmp-wb{background:#fff;padding:3px}
.cmp-k{display:block;color:#9ca3af;font-size:.8rem;margin-top:.25rem}
.cmp-yes{color:#6ee7b7;font-weight:600}
.cmp-no{color:#fca5a5;font-weight:600}
.cmp-miss{color:#9ca3af;font-style:italic}
.cmp-aff{display:block;color:#fcd34d;font-size:.8rem;margin-top:.2rem}
.cmp-links{display:flex;flex-direction:column;align-items:stretch;gap:.4rem}
.cmp-take{color:#e5e7eb}
.cmp-foot{margin-top:1rem;font-size:.85rem;color:#d1d5db}
.cmp-foot p{margin:.35rem 0}
.cmp-foot .cmp-dis{color:#fde68a}
.cmp-hint{display:none;color:#9ca3af;font-size:.8rem;margin:0 0 .5rem}
@media (max-width:640px){
 .cmp-sel{flex:1 1 0;font-size:.85rem;margin:0}
 .cmp-back{padding:0;align-items:flex-end}
 .cmp-dlg{border-radius:1.25rem 1.25rem 0 0;max-height:94vh;max-height:94dvh;padding:1rem .75rem}
 .cmp-t{font-size:.85rem}
 .cmp-t th[scope=row],.cmp-t .cmp-corner{width:5.5rem;padding-left:.25rem}
 .cmp-t.cmp-n3{width:auto}
 .cmp-t.cmp-n3 td,.cmp-t.cmp-n3 thead th[scope=col]{width:9.5rem;min-width:9.5rem}
 .cmp-t.cmp-n3 .cmp-corner{width:5.5rem;min-width:5.5rem}
 .cmp-t:not(.cmp-n3) td,.cmp-t:not(.cmp-n3) thead th[scope=col]{min-width:0}
 .cmp-tool{flex-direction:column;align-items:flex-start;font-size:.95rem}
 .cmp-hint{display:block}
}
@media (prefers-reduced-motion:no-preference){.cmp-scroll{scroll-behavior:smooth}}
