/* «Вычислители аналоги УВП-280» — presentation only.
   ------------------------------------------------------------------
   The comparison itself is editorial content stored on the product and is not
   touched here: not a value, not a row, not a column. What this file fixes is
   that the table arrives as a raw Excel export — <table border="0"> carrying
   .style4/.style5/.style13 classes for which NO rules exist anywhere on the
   site. Every one of those classes was dead, so ten instruments were being
   compared in an unstyled grid with no padding, no header, no way to tell the
   section rows from the data rows and no way to find the УВП-280 column.

   Scoped to `.compare table` inside the product tabs. The neighbouring
   «Сравнение с УВП-280Б.01» tab is div-based markup, not a table, so it is
   untouched by every selector here. */

.compare table.sheet0,
.compare table.gridlines {
  /* separate, not collapse: the first column is sticky below, and collapsed
     borders are dropped on sticky cells in Chrome. Borders therefore live on
     each cell's right/bottom edge, with the table supplying the top and left. */
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  /* Wide enough that «Вода, пар, нефть, природный газ, этилен, этанол…» reads
     as a phrase instead of eleven one-word lines. Past the content width this
     scrolls inside its own wrapper, which is the trade §18 asks for: a little
     horizontal travel beats a column of shredded text. */
  min-width: 1360px;
  border-top: 1px solid #dfe3e8;
  border-left: 1px solid #dfe3e8;
  font-size: 13px;
  line-height: 1.45;
  background: #fff;
}

.compare table.sheet0 td,
.compare table.gridlines td {
  border-right: 1px solid #eceff2;
  border-bottom: 1px solid #eceff2;
  padding: 10px 12px;
  vertical-align: top;
  text-align: left;
  background: #fff;
  color: #2b2f36;
}

/* --- header: «Параметр» / «Тип вычислителя» / the instrument names --------- */

.compare table.sheet0 .row0 td,
.compare table.sheet0 .row1 td {
  background: #f3f5f8;
  font-weight: 600;
  color: #1d2128;
  border-bottom-color: #dfe3e8;
  vertical-align: bottom;
}
.compare table.sheet0 .row0 td { text-align: center; letter-spacing: .01em; }
.compare table.sheet0 .row1 td { text-align: center; font-size: 12.5px; }

/* --- section rows: «Количество входов», «Порты связи», … ------------------ */
/* A section row is one whose second cell spans the instrument columns and
   carries nothing. Without :has() the label cell simply stays plain — the row
   is still readable, so the degradation is cosmetic. */

.compare table.sheet0 tr:not(.row0):not(.row1) td[colspan],
.compare table.sheet0 tr:not(.row0):not(.row1):has(td[colspan]) td {
  background: #eef1f5;
  font-weight: 700;
  color: #1d2128;
  border-bottom-color: #dfe3e8;
}

/* --- zebra, applied to the parameter reading direction -------------------- */

.compare table.sheet0 tr:nth-child(even):not(.row0):not(.row1):not(:has(td[colspan])) td {
  background: #f6f8fa;
}

/* --- the instrument this page is about ------------------------------------ */
/* Column 1 is УВП-280 in this table. Tinted, not shouted: the point is to find
   it while scanning across, not to declare a winner. Written after the zebra
   so it wins on both odd and even rows. */

/* :not([colspan]) throughout — the spanning cells belong to the row, not to
   any one instrument. Without it the «Тип вычислителя» banner, which is
   markup-wise column1, tinted the entire header as though every column were
   the УВП. */
.compare table.sheet0 td.column1:not([colspan]) {
  background: #fff6f1;
  border-right: 1px solid #f0d9cc;
}
.compare table.sheet0 .row1 td.column1:not([colspan]) {
  background: #fdece2;
  color: #9c3d12;
}
.compare table.sheet0 tr:not(.row0):not(.row1):has(td[colspan]) td.column1 {
  background: #eef1f5;   /* a section row has no per-instrument value to mark */
}

/* --- first column stays put while the rest scrolls ------------------------ */

/* Column widths. Left to itself the browser divides eleven columns evenly and
   the instrument this page is about — which carries by far the most text —
   gets the same 100px as a cell reading «6». */
.compare table.sheet0 td:not(.column0):not([colspan]) { min-width: 104px; }
.compare table.sheet0 td.column1:not([colspan]) { min-width: 170px; }

.compare table.sheet0 td.column0 {
  position: sticky;
  left: 0;
  z-index: 2;
  min-width: 210px;
  font-weight: 500;
  background: #fff;
  border-right: 1px solid #dfe3e8;
}
.compare table.sheet0 .row0 td.column0,
.compare table.sheet0 .row1 td.column0 { background: #f3f5f8; z-index: 3; }
.compare table.sheet0 tr:nth-child(even):not(:has(td[colspan])) td.column0 { background: #f6f8fa; }
.compare table.sheet0 tr:not(.row0):not(.row1):has(td[colspan]) td.column0 { background: #eef1f5; }

/* --- the scroll is the wrapper's, never the page's ------------------------ */

/* Aspro lays `.compare` out as display:table, on which overflow does nothing,
   and clips what sticks out — so the last instrument columns could not be
   reached at all. Inside our wrapper it becomes a plain block that scrolls in
   its own right; the wrapper stays as the element the template can rely on. */
.skbpa-compare-scroll .compare {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.skbpa-compare-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* The right-hand shadow only appears while there is more table to reach. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(29,33,40,.13), transparent) left / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(29,33,40,.13), transparent) right / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.skbpa-compare-scroll table.sheet0 { margin-bottom: 0; }

@media (max-width: 768px) {
  .compare table.sheet0 td,
  .compare table.gridlines td { padding: 8px 10px; font-size: 12.5px; }
  .compare table.sheet0 td.column0 { min-width: 150px; }
}