/* Generated by tools/sync_public_hub_ui.mjs from database-worker/public/compare.html (its inline <style> block). Do not edit. */
.hub-compare * { box-sizing:border-box; }
.hub-compare header { padding:14px 22px; border-bottom:2px solid var(--border-strong);
           display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between; }
.hub-compare header h1 { font-size:19px; margin:0; }
.hub-compare header .sub { color:var(--muted); font-size:12.5px; margin-top:2px; }
.hub-compare p.intro { color:var(--muted); font-size:13px; max-width:78ch; margin:0 0 16px; }
.hub-compare section.card { background:var(--panel); border:1px solid var(--border); border-radius:9px;
                 padding:16px 18px; margin:0 0 18px; }
.hub-compare section.card h2 { font-size:15px; margin:0 0 4px; }
.hub-compare .lede { color:var(--muted); font-size:12.5px; margin:0 0 12px; max-width:78ch; }
.hub-compare .cmp-controls { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:flex-end; margin:0 0 16px; }
.hub-compare .cmp-controls label { display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--faint);
                        flex:1 1 200px; max-width:280px; }
.hub-compare .cmp-controls select,
.hub-compare .cmp-controls button { min-height:34px; font:inherit; font-size:13px; color:var(--text);
                        background:var(--panel2); border:1px solid var(--control-border); border-radius:5px; padding:4px 10px; }
.hub-compare .cmp-controls button { cursor:pointer; }
.hub-compare .cmp-links { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12.5px; margin:-6px 0 16px; }
.hub-compare .cmp-pair { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.hub-compare .cmp-pair h3 { font-size:13.5px; margin:0 0 8px; }
.hub-compare .cmp-pair > div { min-width:0; }
.hub-compare .num,
.hub-compare .tdi-table .num { text-align:right; font-variant-numeric:tabular-nums; }
.hub-compare .cmp-scroll { overflow-x:auto; }
.hub-compare .cmp-tags { border-collapse:collapse; width:100%; font-size:12.5px; }
.hub-compare .cmp-tags th,
.hub-compare .cmp-tags td { padding:6px 10px; border-bottom:1px solid var(--border); text-align:left; }
.hub-compare .cmp-tags thead th { color:var(--faint); font-size:11px; font-weight:600; white-space:nowrap; }
.hub-compare .cmp-tags tbody th { font-weight:500; min-width:160px; }
.hub-compare .cmp-glance tbody th { min-width:0; }
.hub-compare .cmp-tags .num { text-align:right; }
.hub-compare .faint { color:var(--faint); }
.hub-compare .sub { color:var(--muted); font-size:11.5px; margin-top:2px; }
.hub-compare .cmp-note { color:var(--faint); font-size:11.5px; margin:10px 0 0; }
.hub-compare .cls { font-weight:600; }
.hub-compare .cls-restricted { color:var(--anti-text); }
.hub-compare .state { color:var(--muted); font-size:13.5px; padding:10px 2px; }
.hub-compare .state.error { color:var(--anti-text); display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.hub-compare .state.error button { background:var(--panel2); color:var(--text); font:inherit;
    border:1px solid var(--control-border); border-radius:5px; padding:5px 12px; min-height:24px; cursor:pointer; }
.hub-compare #page[hidden] { display:none; }
.hub-compare a { color:var(--gold); }
.hub-compare a:focus-visible,
.hub-compare button:focus-visible,
.hub-compare select:focus-visible,
.hub-compare [tabindex]:focus-visible {
    outline:2px solid var(--gold); outline-offset:2px; border-radius:3px; }
.hub-compare .vh { position:absolute; width:1px; height:1px; margin:-1px; padding:0;
        overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.hub-compare [hidden] { display:none !important; }