/* ===== data: ComparisonTable, SpecTable, DiagramFrame ===== */

/* ComparisonTable — ТЭН vs Газ ИК / ROI */
.es-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-sans); background: var(--surface-card); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.es-cmp th, .es-cmp td { padding: var(--space-4) var(--space-5); text-align: left; vertical-align: middle; }
.es-cmp thead th { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-base); color: var(--text-heading); background: var(--surface-sunken); border-bottom: var(--border-w-strong) solid var(--border); letter-spacing: -0.01em; }
.es-cmp thead th:first-child { color: var(--text-muted); font-family: var(--font-sans); font-weight: var(--fw-semibold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.es-cmp tbody td { font-size: var(--text-base); color: var(--text-body); border-bottom: var(--border-w) solid var(--divider); }
.es-cmp tbody td:first-child { font-weight: var(--fw-medium); color: var(--text-heading); }
.es-cmp tbody tr:last-child td { border-bottom: 0; }
.es-cmp td.es-cmp__num, .es-cmp th.es-cmp__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.es-cmp .es-cmp__cell { display: inline-flex; align-items: center; gap: var(--space-2); }
.es-cmp .es-cmp__empty td { text-align: center; color: var(--text-muted); padding: var(--space-12) var(--space-5); font-size: var(--text-base); }
/* branded yes/no chips (replace flat neutral marks) */
.es-cmp .es-cmp__chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; flex: none; }
.es-cmp .es-cmp__chip .es-icon { width: 16px; height: 16px; }
.es-cmp .es-cmp__yes { color: var(--success-fg); font-weight: var(--fw-medium); }
.es-cmp .es-cmp__yes .es-cmp__chip { background: var(--success-soft); color: var(--success); }
.es-cmp .es-cmp__no { color: var(--gray-400); }
.es-cmp .es-cmp__no .es-cmp__chip { background: var(--gray-100); color: var(--gray-400); }
/* winning-column “yes” reads strongest — filled accent chip */
.es-cmp .es-cmp__yes--hl { color: var(--navy-900); font-weight: var(--fw-semibold); }
.es-cmp .es-cmp__yes--hl .es-cmp__chip { background: var(--accent); color: #fff; box-shadow: 0 2px 6px rgba(232,89,33,0.32); }

/* highlighted (winning) column */
.es-cmp .es-cmp--hl { background: var(--navy-700); }
.es-cmp thead th.es-cmp--hl { background: var(--navy-700); color: #fff; border-bottom-color: var(--navy-700); position: relative; }
.es-cmp tbody td.es-cmp--hl { background: rgba(27,55,92,0.05); color: var(--text-heading); font-weight: var(--fw-semibold); border-bottom-color: var(--navy-100); }
.es-cmp thead th.es-cmp--hl .es-cmp__tag { display: inline-flex; align-items: center; gap: 5px; }
.es-cmp thead th.es-cmp--hl .es-icon { width: 16px; height: 16px; color: var(--orange-400); }
.es-cmp tbody td.es-cmp--hl .es-cmp__yes { color: var(--navy-900); }

/* winning column: 4px orange accent bar across its header top */
.es-cmp thead th.es-cmp--hl::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); }
.es-cmp thead th.es-cmp--hl { padding-top: calc(var(--space-4) + 4px); }
/* winning figures lead the eye: larger, heavier, navy */
.es-cmp tbody td.es-cmp--hl.es-cmp__num { font-size: var(--text-lg); font-weight: var(--fw-extra); color: var(--navy-900); letter-spacing: -0.01em; }
.es-cmp tbody td.es-cmp--hl:not(.es-cmp__num) { font-weight: var(--fw-semibold); }
/* losing (non-highlighted) figures recede */
.es-cmp tbody td.es-cmp__num:not(.es-cmp--hl) { color: var(--text-muted); }

/* branded block heading with the 4px orange accent bar (left) */
.es-cmp-block__head { border-left: var(--accent-bar-w) solid var(--accent); padding-left: var(--space-5); margin-bottom: var(--space-6); }
.es-cmp-block__eyebrow { color: var(--text-muted); display: block; margin-bottom: var(--space-2); }
.es-cmp-block__title { font-family: var(--font-display); font-weight: var(--fw-extra); font-size: var(--text-2xl); line-height: 1.14; letter-spacing: -0.02em; color: var(--text-heading); margin: 0; }

/* SpecTable — equipment technical spec */
.es-spec { width: 100%; border-collapse: collapse; font-family: var(--font-sans); background: var(--surface-card); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.es-spec caption { caption-side: top; text-align: left; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-lg); color: var(--text-heading); padding: var(--space-5) var(--space-5) var(--space-3); letter-spacing: -0.01em; }
.es-spec__group td { background: var(--surface-sunken); font-weight: var(--fw-semibold); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); padding: var(--space-3) var(--space-5); }
.es-spec tr, .es-spec tbody tr { border-bottom: var(--border-w) solid var(--divider); }
.es-spec td { padding: var(--space-3) var(--space-5); font-size: var(--text-base); vertical-align: top; }
.es-spec td.es-spec__key { color: var(--text-muted); width: 52%; }
.es-spec td.es-spec__val { color: var(--text-heading); font-family: var(--font-mono); font-weight: var(--fw-medium); text-align: right; font-variant-numeric: tabular-nums; }
.es-spec tbody tr:last-child { border-bottom: 0; }
.es-spec tbody tr:hover { background: var(--navy-50); }

/* DiagramFrame — schematic / diagram container */
.es-diagram { background: var(--surface-card); border: var(--border-w) solid var(--border); border-radius: var(--radius-lg); overflow: hidden; font-family: var(--font-sans); box-shadow: var(--shadow-sm); }
.es-diagram__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-w) solid var(--divider); }
.es-diagram__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-md); color: var(--text-heading); letter-spacing: -0.01em; }
.es-diagram__fig { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: var(--fw-medium); }
.es-diagram__body { padding: var(--space-6); display: flex; align-items: center; justify-content: center; min-height: 220px; background: repeating-linear-gradient(45deg, var(--gray-50), var(--gray-50) 12px, var(--surface-card) 12px, var(--surface-card) 24px); }
.es-diagram__body img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.es-diagram__body--plain { background: var(--surface-card); }
.es-diagram__caption { padding: var(--space-3) var(--space-5) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; border-top: var(--border-w) solid var(--divider); }