/* Features view. Keep the shared page/table theme, not benchmark controls. */
.features-table {
   width: max-content;
   table-layout: auto;
   --features-header-height: 280px;
}
.features-table .features-metadata-header { min-width: 54px; }

/* Match Summary column widths for the fixed metadata columns. */
.features-table .features-metadata-header[data-column="Index"],
.features-table .index-header,
.features-table .index-cell {
   box-sizing: border-box;
   width: 30px;
   min-width: 30px;
   max-width: 30px;
}
.features-table .features-metadata-header[data-column="id"],
.features-table .id-column {
   box-sizing: border-box;
   width: 185px;
   min-width: 185px;
   max-width: 185px;
}
.features-table tbody > tr,
.features-table tbody > tr > th,
.features-table tbody > tr > td { height: 33px; }
.features-table tbody > tr > th,
.features-table tbody > tr > td { padding-top: 0; padding-bottom: 0; }
.features-table thead .features-group-header {
   height: 42px;
   padding: 6px;
   border-left: 1px solid var(--border-dark);
   background: var(--header-strong);
   white-space: normal;
   line-height: 1.15;
}
.features-table thead .features-group-header > span {
   display: block;
   width: 100%;
   white-space: normal;
   overflow-wrap: anywhere;
}
/* The diagonal bands are transformed buttons, not transformed THs.
   Table geometry, the body columns and sticky measurements remain rectangular. */
.features-table {
   --feature-caption-angle: -35deg; /* 325deg */
   --feature-band-skew: -55deg;    /* -(90 - 35): edges parallel to the text */
   --feature-band-unskew: 55deg;
}
.features-table .feature-header,
.features-table .feature-cell,
.features-table .feature-column {
   width: 30px;
   min-width: 30px;
   max-width: 30px;
   padding-left: 0;
   padding-right: 0;
}
.features-table thead th.feature-header {
   height: var(--features-header-height);
   min-height: var(--features-header-height);
   padding: 0;
   border-left: 0;
   border-right: 0;
   background: var(--header-bg);
   vertical-align: bottom;
   overflow: visible;
}
.features-table .feature-sort-button {
   position: relative;
   display: block;
   box-sizing: border-box;
   width: 30px;
   min-width: 30px;
   max-width: 30px;
   height: calc(var(--features-header-height) - 1px);
   min-height: 0;
   margin: 0;
   padding: 0;
   border: 0;
   border-right: 1px solid var(--border);
   background: var(--header-bg);
   text-align: left;
   transform: skewX(var(--feature-band-skew));
   transform-origin: left bottom;
   overflow: visible;
}
.features-table .feature-header-caption {
   top: auto;
   bottom: 9px;
   left: 24px;
   /* Undo the band skew before rotating the text, so glyphs are not deformed. */
   transform: skewX(var(--feature-band-unskew)) rotate(var(--feature-caption-angle));
   transform-origin: left bottom;
   line-height: 1;
   font-size: 12px;
   white-space: nowrap;
   pointer-events: none;
}
.features-table .feature-sort-icon {
   bottom: 1px;
   right: 20px;
   transform: skewX(var(--feature-band-unskew));
   pointer-events: none;
}
.features-table tbody .feature-group-start { border-left: 1px solid var(--border-dark); }
.features-table thead th.alternate { background: var(--header-bg); }
.features-table thead th.alternate .feature-sort-button { background: #dfeafa; }
.features-table thead th.feature-group-start .feature-sort-button {
   border-left: 1px solid var(--border-dark);
}
.features-table .feature-sort-button:hover,
.features-table .feature-sort-button:focus-visible,
.features-table th.feature-header[aria-sort="descending"] .feature-sort-button {
   background: var(--header-strong);
}
.features-table tbody td.alternate { background-color: rgba(79,141,247,.065); }
.features-table tbody tr:hover td.alternate { background-color: rgba(79,141,247,.13); }
.features-table .feature-cell { text-align: center; line-height: 1; }
/* Feature data cells contain exactly one Unicode text character. */
.features-table td.feature-cell,
.features-legend .support-symbol {
   font-family: Arial, "Segoe UI Symbol", sans-serif;
   font-size: 17px;
   font-weight: 700;
}
.features-table td.support-value-2,
.features-legend .support-value-2 { color: #16803c; font-size: 17px; }
.features-table td.support-value-1,
.features-legend .support-value-1 { color: #789DE8; font-weight: 400; }
.features-table td.support-value-0,
.features-legend .support-value-0 { color: #c62828; font-size: 15px; }
.features-table td.support-value--1,
.features-legend .support-value--1 { color: #C19B9B; }
.features-table td.support-link-cell { cursor: pointer; }
.features-table td.support-link-cell:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: -2px;
}
.features-legend {
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
   margin: 12px 0 18px;
   color: var(--muted);
   font-size: 13px;
}
.features-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.features-sticky-header { top: 0; }
@media print {
   .features-table [data-fixed-side] {
      position: static !important;
      left: auto !important;
      right: auto !important;
   }
   .features-table { width: max-content; }
}

/* Let the rotated labels paint above adjacent cell backgrounds.
   Sticky THs create stacking contexts even with z-index:auto, so the real
   leaf headers use relative positioning; viewport copies are absolute. */
#compare-table .features-table thead th.feature-header {
   position: relative;
   z-index: auto;
}
.comparison-sticky-header .features-table thead th.feature-header {
   z-index: auto;
}
.features-table .feature-sort-button { z-index: 1; }


/* Filter and Mobile inherit their Summary controls, dimensions and chart.
   The feature table has two header tiers, without a benchmark range row. */
.features-table thead th.filter-header {
   width: 30px;
   min-width: 30px;
   max-width: 30px;
   padding: 0;
}


/* Shared mobile rules release fixed cells in the real table, but the viewport
   header copy always uses measured absolute geometry, even for released cells. */
.comparison-sticky-header .features-table thead th[data-fixed-side] {
   position: absolute;
}


/* Empty space is part of the scrolling area and cannot grow with its content. */
.features-table th.features-spacer,
.features-table td.features-spacer {
   box-sizing: border-box;
   width: 150px;
   min-width: 150px;
   max-width: 150px;
   padding: 0;
}
#compare-table .features-table thead th.features-spacer {
   position: relative;
   z-index: auto;
}
.comparison-sticky-header .features-table thead th.features-spacer {
   position: absolute;
   z-index: auto;
}
.features-table thead th.features-spacer {
   background: var(--header-bg);
   border-left: 0;
   border-right: 0;
}

/* Absolute THs in the pinned copy do not retain table-cell vertical alignment.
   Explicit flex centering keeps group and metadata labels at the same height. */
.comparison-sticky-header .features-table thead th.features-group-header,
.comparison-sticky-header .features-table thead th.features-metadata-header {
   display: flex;
   align-items: center;
   justify-content: center;
}
.comparison-sticky-header .features-table .features-metadata-header > .sort-button {
   height: 100%;
   min-height: 0;
   align-items: center;
   justify-content: center;
}


/* Diagonal paint must not increase scrollWidth beyond the table's real end,
   otherwise the real right pane reaches its boundary before the pinned copy.
   Unlike overflow:hidden, overflow:clip does not create another scroll container. */
.features-table-clip {
   width: max-content;
   overflow: clip;
}


/* Whole-column hover, synchronized with both real and pinned headers.
   Do not color the rectangular feature TH: its diagonal button is the band. */
.features-table {
   --column-hover-bg: #dcecff;
   --column-hover-header-bg: #c4ddfa;
}
@media screen {
   .comparison-table.features-table tbody > tr > [data-column-index].is-column-hover {
      background-color: var(--column-hover-bg) !important;
   }
   .comparison-table.features-table thead th.is-column-hover:not(.feature-header) {
      background-color: var(--column-hover-header-bg) !important;
   }
   .comparison-table.features-table thead th.is-column-hover > .sort-button,
   .comparison-table.features-table thead th.feature-header.is-column-hover > .feature-sort-button {
      background: var(--column-hover-header-bg) !important;
   }
}


/* Feature selection and sorting are separate, valid sibling controls. */
.features-table .feature-header-controls {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   width: max-content;
   height: 15px;
   pointer-events: auto;
}
.features-table .feature-caption-sort {
   display: inline-block;
   width: auto;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
   font: inherit;
   line-height: 15px;
   white-space: nowrap;
   cursor: pointer;
}
.features-table .feature-filter-checkbox,
.features-table .section-filter-checkbox {
   flex: 0 0 13px;
   width: 13px;
   height: 13px;
   margin: 0;
   padding: 0;
   accent-color: var(--accent);
   cursor: pointer;
}
.features-table .feature-caption-sort:focus-visible,
.features-table .feature-filter-checkbox:focus-visible,
.features-table .section-filter-checkbox:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 2px;
}
.features-table .feature-header-band:focus-within {
   background: var(--header-strong);
}

/* Section totals occupy the first 30px column of each feature group. */
.features-table .feature-section-column {
   width: 30px;
   min-width: 30px;
   max-width: 30px;
}
.features-table tbody .feature-section-cell {
   padding: 0 2px;
   text-align: center;
   font-size: 13px;
   font-weight: 800;
   background-color: rgba(79, 141, 247, .10);
}
.features-table .feature-section-header .feature-header-band {
   background: var(--header-strong);
}
.features-table .feature-section-header .feature-caption-sort {
   font-size: 13px;
   font-weight: 900;
}

/* SumFeatures: Title (wrapped), complete feature count, master Filter. */
.features-table .sum-features-column {
   box-sizing: border-box;
   width: 40px;
   min-width: 40px;
   max-width: 40px;
}
.features-table .sum-features-header {
   white-space: normal;
   vertical-align: middle;
}
.features-table .sum-features-header-content {
   display: flex;
   box-sizing: border-box;
   width: 100%;
   min-width: 0;
   max-width: 100%;
   margin-inline: auto;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 8px 2px;
   white-space: normal;
}
.features-table .sum-features-sort {
   width: 100%;
   min-width: 0;
   max-width: 100%;
   min-height: 0;
   padding: 0;
   gap: 1px;
   white-space: normal;
}
.features-table .sum-features-sort .sort-icon {
   flex: 0 0 auto;
   font-size: 10px;
}
.features-table .sum-features-title {
   min-width: 0;
   white-space: normal;
   overflow-wrap: anywhere;
   line-height: 1.2;
}
.features-table .sum-features-count {
   display: block;
   font-size: 15px;
   font-weight: 900;
   line-height: 1.2;
}
.features-table .features-filter-label {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   margin: 0;
   color: var(--muted);
   font-size: 12px;
   line-height: 16px;
   white-space: nowrap;
   cursor: pointer;
}
.features-table .features-filter-master {
   width: 15px;
   height: 15px;
   margin: 0;
   accent-color: var(--accent);
   cursor: pointer;
}
.features-table .sum-features-cell {
   font-size: 14px;
   font-weight: 900;
   text-align: right;
}

.grid-reset-settings.grid-reset-settings-mobile {
   width: auto!important;
}

/* Native indeterminate state shows that only some features in a section
   are selected. Empty sections have no selectable features. */
.features-table .section-filter-checkbox:disabled {
   cursor: default;
}
@media (max-width: 1359px) {
   .comparison-table .index-cell {
      padding-left: 4px;
      padding-right: 4px;
   }

   .comparison-table .text-cell,
   .comparison-table .link-cell {
      padding-left: 5px;
      padding-right: 2px;
   }

   .comparison-table .version-cell {
      padding-right: 2px;
   }

   .comparison-table .price-cell,
   .comparison-table .points-cell:has(~ .points-cell),
   .comparison-table .total-cell,
   .comparison-table .difference-cell {
      padding-left: 2px;
      padding-right: 5px;
   }

   .sort-button {
      padding-left: 0px;
      padding-right: 0px;
   }

   .comparison-table .chart-cell,
   .comparison-table .chart-header {
      width: 100px;
      min-width: 100px;
      max-width: 100px;
   }
}