/*
 * PrimaryMD comparison chart V3 — premium emphasis proposal
 *
 * Integration notes:
 * 1. Add `pmd-v3_comparison-chart--v3` to the existing chart wrapper. It can
 *    sit beside `pmd-v3_comparison-chart--v2` during rollout.
 * 2. Load this file after pmd_v3_styles.css/comparison-v2.css.
 * 3. Keep `pmd-v3_comparison-primarymd` on the PrimaryMD <th> and every
 *    PrimaryMD <td>. That class creates the continuous navy column.
 * 4. No cell-copy changes are required. Retain the visible ✓ / — / ~ marks,
 *    their `.pmd-v3_sr-only` meanings, the swipe hint, and the legend.
 * 5. If V2 and V3 charts ever coexist on one page, give the legend and
 *    footnote unique IDs and update the table's `aria-describedby`.
 *
 * This file is inert until the opt-in `--v3` class is present.
 */

.pmd-v3_comparison-chart--v3 {
  --pmd-v3-compare-feature-width: 37%;
  --pmd-v3-compare-primary-width: 18%;
  --pmd-v3-compare-peer-width: 22.5%;
  --pmd-v3-compare-navy: var(--pmd-blue-900, #152a44);
  --pmd-v3-compare-navy-deep: #10243b;
  --pmd-v3-compare-navy-hover: #1b3656;
  --pmd-v3-compare-cream: #f8f1ea;
  --pmd-v3-compare-group: #eee5dc;
  --pmd-v3-compare-rule: rgba(21, 42, 68, 0.13);
  position: relative;
  width: 100%;
  min-width: 0;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(21, 42, 68, 0.18);
  border-radius: 14px;
  background: var(--pmd-white, #ffffff);
  box-shadow:
    0 22px 60px rgba(21, 42, 68, 0.08),
    0 2px 8px rgba(21, 42, 68, 0.04);
  scrollbar-color: var(--pmd-sand-500, #a17b58) rgba(21, 42, 68, 0.08);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll:focus-visible {
  outline: 3px solid #e5b07a;
  outline-offset: 4px;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table {
  width: 100%;
  min-width: 900px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--pmd-white, #ffffff);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-col--feature {
  width: var(--pmd-v3-compare-feature-width);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-col--primarymd {
  width: var(--pmd-v3-compare-primary-width);
  background: var(--pmd-v3-compare-navy);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-col--peer {
  width: var(--pmd-v3-compare-peer-width);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table th,
.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table td {
  height: 58px;
  padding: 15px 20px;
  border-right: 0;
  border-bottom: 1px solid var(--pmd-v3-compare-rule);
  color: var(--pmd-blue-900, #152a44);
  background: var(--pmd-white, #ffffff);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.42;
  text-align: center;
  vertical-align: middle;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table thead th {
  height: 68px;
  padding-block: 17px;
  border-bottom-color: rgba(21, 42, 68, 0.2);
  color: var(--pmd-blue-900, #152a44);
  background: #fbfaf8;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: 0.005em;
  line-height: 1.3;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table thead th:first-child,
.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table tbody th[scope="row"] {
  width: var(--pmd-v3-compare-feature-width);
  color: var(--pmd-blue-900, #152a44);
  font-weight: 700;
  text-align: left;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table tbody th[scope="row"] {
  text-wrap: pretty;
}

/*
 * The product distinction reads as one deliberate navy spine rather than a
 * collection of highlighted cells.
 */
.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-table
  .pmd-v3_comparison-primarymd {
  border-right: 1px solid rgba(255, 255, 255, 0.13);
  border-bottom-color: rgba(255, 255, 255, 0.17);
  border-left: 1px solid rgba(255, 255, 255, 0.13);
  color: var(--pmd-white, #ffffff);
  background: var(--pmd-v3-compare-navy);
  box-shadow:
    inset 1px 0 rgba(255, 255, 255, 0.04),
    inset -1px 0 rgba(255, 255, 255, 0.04);
  font-weight: 750;
}

.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-table
  thead
  .pmd-v3_comparison-primarymd {
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--pmd-white, #ffffff);
  background: var(--pmd-v3-compare-navy-deep);
  font-size: 14px;
  letter-spacing: 0.015em;
}

.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-primarymd
  .pmd-v3_comparison-mark,
.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-primarymd
  .pmd-v3_comparison-mark--yes,
.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-primarymd
  .pmd-v3_comparison-mark--no,
.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-primarymd
  .pmd-v3_comparison-mark--varies {
  color: var(--pmd-white, #ffffff);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-mark {
  display: inline-flex;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  color: var(--pmd-blue-900, #152a44);
  font-family: Arial, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-mark--yes {
  color: var(--pmd-amber-700, #873d1b);
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-mark--no {
  color: #77736d;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-mark--varies {
  color: #8b694d;
  font-weight: 600;
}

/*
 * A narrow navy segment carries the PrimaryMD spine through desktop category
 * dividers. On mobile the whole divider becomes navy so horizontal scrolling
 * cannot move that segment out from under the sticky columns.
 */
.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-group > th {
  position: relative;
  height: 44px;
  overflow: hidden;
  padding: 12px 20px;
  border-bottom-color: rgba(21, 42, 68, 0.15);
  color: var(--pmd-amber-700, #873d1b);
  background: var(--pmd-v3-compare-group);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-group > th::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pmd-v3-compare-feature-width);
  width: var(--pmd-v3-compare-primary-width);
  content: "";
  background: var(--pmd-v3-compare-navy);
  pointer-events: none;
}

.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-table
  tbody:last-of-type
  tr:last-child
  > * {
  border-bottom: 0;
}

@media (hover: hover) and (pointer: fine) {
  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    tbody
    tr:not(.pmd-v3_comparison-group):hover
    > :not(.pmd-v3_comparison-primarymd) {
    background: #fcf8f4;
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    tbody
    tr:not(.pmd-v3_comparison-group):hover
    > .pmd-v3_comparison-primarymd {
    background: var(--pmd-v3-compare-navy-hover);
  }
}

/* The key belongs below the data, as a quiet reading aid rather than a card. */
.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend {
  display: flex;
  align-items: flex-start;
  gap: 16px 32px;
  margin-top: 18px;
  padding: 18px 2px 0;
  border: 0;
  border-top: 1px solid rgba(21, 42, 68, 0.16);
  border-radius: 0;
  background: transparent;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-title {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 5px;
  color: var(--pmd-blue-900, #152a44);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-list li {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  color: var(--pmd-ink-muted, #5a5853);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.pmd-v3_comparison-chart--v3
  .pmd-v3_comparison-legend
  .pmd-v3_comparison-mark {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  font-size: 20px;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-footnote {
  max-width: 98ch;
  margin: 14px 0 0;
  color: var(--pmd-ink-muted, #5a5853);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

.pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll-hint {
  display: none;
}

@media (max-width: 1024px) {
  .pmd-v3_comparison-chart--v3 {
    --pmd-v3-compare-feature-width: 36%;
    --pmd-v3-compare-primary-width: 18%;
    --pmd-v3-compare-peer-width: 23%;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table {
    min-width: 820px;
  }
}

@media (max-width: 768px) {
  .pmd-v3_comparison-chart--v3 {
    --pmd-v3-compare-feature-width: 152px;
    --pmd-v3-compare-primary-width: 88px;
    --pmd-v3-compare-peer-width: 174px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll-hint {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0 2px 8px;
    color: var(--pmd-blue-900, #152a44);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-scroll-hint
    span:last-child {
    color: var(--pmd-amber-700, #873d1b);
    font-size: 22px;
    line-height: 1;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll {
    border-radius: 10px;
    scroll-padding-inline-start: calc(
      var(--pmd-v3-compare-feature-width) +
      var(--pmd-v3-compare-primary-width)
    );
    scroll-snap-type: inline proximity;
    scrollbar-gutter: auto;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table {
    width: 100%;
    min-width: calc(
      var(--pmd-v3-compare-feature-width) +
      var(--pmd-v3-compare-primary-width) +
      var(--pmd-v3-compare-peer-width) +
      var(--pmd-v3-compare-peer-width)
    );
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table th,
  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table td {
    height: 54px;
    padding: 12px 10px;
    font-size: 13px;
    line-height: 1.36;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table thead th {
    height: 62px;
    padding: 12px 8px;
    font-size: 11px;
    line-height: 1.25;
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:nth-child(3),
  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:nth-child(4) {
    scroll-snap-align: start;
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:first-child,
  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    tbody
    tr:not(.pmd-v3_comparison-group)
    > th[scope="row"] {
    position: sticky;
    z-index: 4;
    left: 0;
    width: var(--pmd-v3-compare-feature-width);
    min-width: var(--pmd-v3-compare-feature-width);
    max-width: var(--pmd-v3-compare-feature-width);
    color: var(--pmd-blue-900, #152a44);
    background: var(--pmd-white, #ffffff);
    box-shadow: 8px 0 18px -17px rgba(21, 42, 68, 0.85);
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:first-child {
    z-index: 7;
    background: #fbfaf8;
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:nth-child(2),
  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    tbody
    td:nth-child(2) {
    position: sticky;
    z-index: 5;
    left: var(--pmd-v3-compare-feature-width);
    width: var(--pmd-v3-compare-primary-width);
    min-width: var(--pmd-v3-compare-primary-width);
    max-width: var(--pmd-v3-compare-primary-width);
    color: var(--pmd-white, #ffffff);
    background: var(--pmd-v3-compare-navy);
    box-shadow:
      10px 0 20px -17px rgba(8, 22, 38, 0.95),
      inset 1px 0 rgba(255, 255, 255, 0.05);
  }

  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    thead
    th:nth-child(2) {
    z-index: 6;
    background: var(--pmd-v3-compare-navy-deep);
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-group > th {
    position: static;
    height: 42px;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 11px 12px;
    color: #f0b985;
    background: var(--pmd-v3-compare-navy-deep);
    box-shadow: none;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-group > th::after {
    display: none;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-mark {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    font-size: 22px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-title {
    padding-top: 0;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-legend-list li {
    min-height: 44px;
    font-size: 14px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-footnote {
    margin-top: 10px;
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .pmd-v3_comparison-chart--v3 {
    --pmd-v3-compare-feature-width: 136px;
    --pmd-v3-compare-primary-width: 82px;
    --pmd-v3-compare-peer-width: 168px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table th,
  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table td {
    padding-inline: 8px;
    font-size: 12.5px;
  }
}

@media (max-width: 340px) {
  .pmd-v3_comparison-chart--v3 {
    --pmd-v3-compare-feature-width: 128px;
    --pmd-v3-compare-primary-width: 78px;
    --pmd-v3-compare-peer-width: 164px;
  }

  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table th,
  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-table td {
    padding-inline: 7px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pmd-v3_comparison-chart--v3 .pmd-v3_comparison-scroll {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
}

@media (forced-colors: active) {
  .pmd-v3_comparison-chart--v3
    .pmd-v3_comparison-table
    .pmd-v3_comparison-primarymd {
    border: 1px solid CanvasText;
    color: Canvas;
    background: CanvasText;
    forced-color-adjust: auto;
  }
}