/* Comparison sheet (concept B «Инженерный»): one hairline table with a sticky parameter column, rows equal for every
   model quieted, then the discharge chart card. Both cards are .dch (main.css), so the blue h2 bars line up. */
.cmp-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; }
.cmp-head .sub { color:#6c757d; margin:0; }
.cmp-head .btn:focus-visible { outline:2px solid #0d6efd; outline-offset:2px; }  /* .shadow hides the focus ring */
.cmp-empty { max-width:40rem; padding:.5rem 0 2.5rem; }
.cmp-empty p { color:#6c757d; margin-bottom:1.25rem; }

/* card header: h2 and the bold / grey key on the left, «Добавить модель» on the right */
.cmp-bar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem 2rem; margin-bottom:1.25rem; }
.cmp-legend { color:#6c757d; font-size:.85rem; margin:0; }
.cmp-legend > span { white-space:nowrap; }
.cmp-legend b { font-weight:600; color:#212529; }
.cmp-bar .cmp-full { color:#6c757d; font-size:.875rem; margin:0; background:#f8f9fa; border:1px solid #e9ecef; border-radius:.5rem; padding:.5rem .75rem; }

.cmp-add { display:flex; align-items:center; gap:.65rem; }
.cmp-add label { color:#6c757d; font-size:.85rem; white-space:nowrap; }
.cmp-add .fld { position:relative; width:18rem; }
.cmp-add .bi-search { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:#6c757d; font-size:.85rem; pointer-events:none; line-height:1; }
.cmp-add input[type="search"] { padding-left:2rem; }
.cmp-sugg { position:absolute; left:0; right:0; top:100%; z-index:10; margin:.25rem 0 0; background:#fff; border:1px solid #dee2e6; border-radius:.5rem; box-shadow:0 .5rem 1rem rgba(0,0,0,.08); list-style:none; padding:.25rem 0; }
.cmp-sugg:empty { display:none; }
.cmp-sugg a { display:flex; justify-content:space-between; gap:1rem; padding:.4rem .75rem; font-size:.875rem; color:#212529; text-decoration:none; }
.cmp-sugg a:hover, .cmp-sugg a:focus { background:#f1f3f5; }
.cmp-sugg .m { color:#6c757d; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* Table sizing: parameter column --p, --n model columns from --mmin to --mmax wide. Below the minimum the frame
   scrolls sideways inside the card with the parameter column pinned; the page itself never does. */
.cmp-wrap { --p:12.5rem; --mmin:8.5rem; --mmax:16rem; overflow-x:auto; }
.cmp-wrap.is-scroll { border:1px solid #e9ecef; border-radius:.75rem; }
.cmp-t { border-collapse:separate; border-spacing:0; table-layout:fixed; width:calc(var(--p) + var(--n) * var(--mmax)); max-width:100%; min-width:calc(var(--p) + var(--n) * var(--mmin)); font-size:.9375rem; font-variant-numeric:tabular-nums; }
.cmp-t col.c-p { width:var(--p); }
.cmp-t th, .cmp-t td { padding:.6rem .75rem; border-top:1px solid #e9ecef; vertical-align:baseline; background:#fff; }
.cmp-t thead th { border-top:0; border-bottom:1px solid #adb5bd; vertical-align:top; padding-top:.35rem; padding-bottom:.65rem; text-align:right; font-weight:400; }
.cmp-t thead th.c-p { position:sticky; left:0; z-index:2; vertical-align:bottom; text-align:left; color:#6c757d; font-size:.8rem; font-weight:500; box-shadow:1px 0 0 #e9ecef; }
.cmp-t tbody th { position:sticky; left:0; z-index:2; text-align:left; font-weight:500; color:#212529; box-shadow:1px 0 0 #e9ecef; }
.cmp-t tbody td { text-align:right; font-weight:600; color:#212529; white-space:nowrap; }
.cmp-t tbody tr:first-child > * { border-top:0; }
.cmp-t tbody tr:nth-child(3) > * { border-top:1px solid #ced4da; }  /* vendor and series above, catalogue parameters below */
.cmp-t tbody tr:hover > * { background:#f8f9fa; }
.cmp-t tr.same th, .cmp-t tr.same td { color:#6c757d; font-weight:400; }
.cmp-t td.na { color:#adb5bd; font-weight:400; }
.cmp-t td.txt { white-space:normal; }
.cmp-t .lu { color:#6c757d; font-weight:400; }
.cmp-t tr.same .lu { color:#868e96; }

/* model header, on the right edge of its column: key glyph and ×, vendor, name in ink linking to the product page,
   then the block's cell note; top-aligned, so the names line up across columns whatever the notes wrap to */
.cmp-mh { display:flex; justify-content:flex-end; align-items:center; gap:.35rem; margin:0 -.5rem .1rem 0; min-height:2rem; }
.cmp-key { display:block; flex:none; }
.cmp-x { flex:none; display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; color:#6c757d; font-size:.85rem; text-decoration:none; }
.cmp-x:hover { background:#f1f3f5; color:#dc3545; }
.cmp-x:focus-visible { outline:2px solid #0d6efd; outline-offset:1px; }
.cmp-v { display:block; color:#6c757d; font-size:.8rem; line-height:1.3; }
.cmp-n { display:block; font-weight:700; line-height:1.3; color:#212529; text-decoration:none; overflow-wrap:anywhere; }
.cmp-n:hover { color:#212529; text-decoration:underline; }
.cmp-flag { display:block; color:#6c757d; font-size:.75rem; line-height:1.3; }
.cmp-mh .cmp-flag { white-space:nowrap; }

/* chart card */
.cmp-ch-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; margin-bottom:1rem; }
.cmp-ch-head .sub { margin:0; }
.cmp-ev { display:flex; align-items:center; gap:.65rem; }
.cmp-ev label { color:#6c757d; font-size:.85rem; }
.cmp-ev select { width:auto; min-width:7.5rem; font-variant-numeric:tabular-nums; font-weight:600; }
.dch .dch-canvas.cmp-canvas { height:420px; }
.cmp-keys { list-style:none; padding:0; margin:.75rem 0 0; display:flex; flex-direction:column; gap:.35rem; font-size:.875rem; }
.cmp-keys li { display:flex; align-items:center; gap:.6rem; }
.cmp-notes { margin-top:.75rem; }
.cmp-notes .dch-note { margin-top:.35rem; }
.cmp-notes .dch-note strong { color:#212529; font-weight:600; }

/* no shared end voltage */
.cmp-none { background:#f8f9fa; border:1px solid #e9ecef; border-radius:.75rem; padding:1.25rem 1.5rem; }
.cmp-none h3 { font-size:1.05rem; font-weight:600; margin:0 0 .35rem; }
.cmp-none .lead2 { color:#6c757d; margin:0 0 .9rem; font-size:.9rem; }
.cmp-evs { width:100%; border-collapse:collapse; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.cmp-evs th, .cmp-evs td { padding:.5rem .75rem .5rem 0; border-top:1px solid #dee2e6; vertical-align:baseline; text-align:left; }
.cmp-evs tr:first-child > * { border-top:0; }
.cmp-evs th { font-weight:600; white-space:nowrap; width:1%; padding-right:2rem; }
.cmp-evs th .cmp-key { display:inline-block; vertical-align:middle; }
.cmp-evs td.span { color:#6c757d; font-size:.85rem; white-space:nowrap; width:1%; padding-left:1.5rem; }
.cmp-evs .chip { display:inline-block; border:1px solid #dee2e6; background:#fff; border-radius:2rem; padding:.05rem .6rem; margin:.1rem .3rem .1rem 0; font-weight:600; font-size:.875rem; }

@media (min-width:768px) {
    .cmp-keys { display:none; }  /* the names sit at the curve ends */
}
@media (max-width:767px) {
    /* two model columns beside a narrow parameter column at 390 px, the next one peeks in and scrolls inside the card */
    .cmp-wrap { --p:7rem; --mmin:6.25rem; }
    .cmp-t { font-size:.875rem; }
    .cmp-t th, .cmp-t td { padding:.5rem; }
    .cmp-mh { margin-right:-.5rem; min-height:2.5rem; }
    .cmp-x { width:2.5rem; height:2.5rem; }
    .cmp-mh .cmp-flag { white-space:normal; min-width:0; text-align:right; line-height:1.15; }  /* «нет графика» on two lines beside the full × */
    .cmp-n { font-size:.8125rem; }
    .cmp-t tbody th { font-size:.75rem; line-height:1.3; }
    .cmp-legend > span { white-space:normal; }
    .cmp-legend { font-size:.8rem; }
    .cmp-bar > *, .cmp-add { width:100%; }
    .cmp-add { flex-direction:column; align-items:stretch; gap:.3rem; }
    .cmp-add .fld { width:100%; }
    .dch .dch-canvas.cmp-canvas { height:300px; }
    .cmp-ev { width:100%; justify-content:space-between; }
    /* each model on its own line, its end voltage chips under it */
    .cmp-evs tr, .cmp-evs th, .cmp-evs td { display:block; width:auto; }
    .cmp-evs th { white-space:normal; padding:.5rem 0 .2rem; }
    .cmp-evs td { border-top:0; padding:0 0 .5rem; }
    .cmp-evs td.span { width:auto; padding:0 0 .6rem; white-space:normal; }
}