/* v3.2.5 visuals kept */
.htw-compare { --max-cm: 250; --stage-h: 300px; --bar-w: 18px; --ruler-w: 72px; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif; color:#0f172a; }
.htw-compare *{ box-sizing:border-box; }
.htw-compare .card{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:16px; box-shadow:0 6px 18px rgba(2,6,23,.06); }
.htw-compare .row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; }
.htw-compare label{ font-size:.9rem; color:#334155; margin-bottom:6px; display:block; }
.htw-compare input, .htw-compare select, .htw-compare button{ height:40px; padding:0 12px; border-radius:10px; border:1px solid #cbd5e1; }
.htw-compare input:focus, .htw-compare select:focus{ outline:2px solid #93c5fd; border-color:#93c5fd; }
.htw-compare button{ cursor:pointer; border:none; background:#2563eb; color:#fff; font-weight:600; }
.htw-compare .ghost{ background:transparent; color:#0f172a; border:1px dashed #94a3b8; }
.htw-compare .list{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.htw-compare .chip{ display:flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#f8fafc; font-size:.9rem; }
.htw-compare .chip button{ height:26px; padding:0 10px; border-radius:999px; background:#ef4444; border:none; color:#fff; cursor:pointer; }

.htw-compare .viz{ position:relative; width:100%; overflow-x:auto; border:1px solid #e2e8f0; border-radius:14px; padding:14px 14px 14px 0; background:#f8fafc; margin-top:10px; }
.htw-compare .ruler{ position:absolute; left:12px; top:14px; bottom:14px; width:var(--ruler-w); border-right:1px solid #94a3b8; }
.htw-compare .ruler .tick{ position:absolute; left:0; width:100%; display:flex; align-items:center; gap:6px; pointer-events:none; }
.htw-compare .ruler .tick .line{ height:1px; background:#94a3b8; flex:1; }
.htw-compare .ruler .tick.major .line{ height:2px; }
.htw-compare .ruler .tick .label{ width:44px; text-align:right; font-size:.78rem; color:#475569; }

.htw-compare .stage{ position:relative; margin-left:calc(var(--ruler-w) + 24px); display:flex; align-items:flex-end; gap:28px; min-height:var(--stage-h); padding-bottom:0; }
.htw-compare .column{ position:relative; width:100px; height:var(--stage-h); }
.htw-compare .column .bar-wrap{ position:absolute; bottom:0; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.htw-compare .bar{ width:var(--bar-w); border-radius:6px; opacity:.8; }
.htw-compare .top-cap{ width:64px; height:1px; background:#111827; opacity:.45; margin-bottom:2px; }

/* Two-line headline lowered (from labelFix) */
.htw-compare .headline{
  position:absolute;
  left:50%;
  transform: translate(-50%, calc(-100% + 8px)); /* closer to bar top */
  bottom: 0;
  text-align:center;
  font-size:.8rem;
  color:#0f172a;
  font-weight:700;
  line-height:1.15;
  z-index:2;
  pointer-events:none;
}
.htw-compare .headline .hl-name{ display:block; font-weight:700; white-space:nowrap; }
.htw-compare .headline .hl-measure{ display:block; font-weight:600; white-space:nowrap; }

@media (max-width: 640px){
  .htw-compare .row{ grid-template-columns:1fr 1fr; }
}