/*
 * Accepted comparison presentation for the article body.
 * Opt in on the existing comparison root with data-fitts-design-approved-v6.
 * Load after current component/reader/layout CSS. Site publication remains separate.
 * Preserve .fitts-stage, its 184px height, the 168-unit measurement SVG,
 * and every measured button dimension/position from the current controller.
 * No phase inference: enabled targets include both armed and completed states.
 */
[data-fitts-comparison][data-fitts-design-approved-v6] {
  --fitts-v6-line: #deded9;
  --fitts-v6-stage: #f6f6f2;
}

[data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-task {
  margin: 0 0 16px;
}

/* One white control bar, joined to one shared grey instrument surface. */
[data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin: 0;
  padding: 16px 24px;
  border: 1px solid var(--fitts-v6-line);
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background: var(--paper, #fff);
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls > label:first-child {
  flex: 0 1 auto;
  width: auto;
  min-width: 0;
  gap: 8px;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls > :is([data-fitts-width-label], [data-fitts-distance-label]) {
  display: grid;
  grid-template-columns: max-content minmax(96px, 1fr) max-content;
  align-items: center;
  flex: 1 1 320px;
  width: auto;
  min-width: 0;
  gap: 8px 12px;
}

/* Native hidden/disabled semantics remain the controller's responsibility. */
[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls > [hidden] {
  display: none !important;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls input[type="range"] {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  margin: 0;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls output {
  grid-column: 3;
  grid-row: 1;
  font-family: Outfit, var(--font, sans-serif);
  font-size: calc(16px * var(--reader-scale, 1));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ink, #242528);
}

[data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--fitts-v6-line);
  border-radius: 0 0 16px 16px;
  background: var(--fitts-v6-stage);
  overflow: visible;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-areas: "heading stage" "reason stage" "values stage" "status status";
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 20px 24px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel + .fitts-panel {
  border-top: 1px solid var(--fitts-v6-line);
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel-heading {
  grid-area: heading;
  gap: 8px;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel > [data-fitts-reason] {
  grid-area: reason;
  min-height: 0;
  margin: 0;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-stage {
  grid-area: stage;
  align-self: center;
  min-width: 0;
  margin: 0;
  /* Existing width, height, coordinates, SVG and hit rectangles are inherited. */
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel > .fitts-values {
  grid-area: values;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel > .fitts-status {
  grid-area: status;
  min-height: 0;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--fitts-v6-line);
}

/* Same yellow stimulus in both lanes; disabled remains native and non-actionable. */
[data-fitts-comparison][data-fitts-design-approved-v6] .fitts-stage [data-fitts-target]:disabled {
  opacity: 1;
}

[data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-interpretation {
  margin: 16px 0 12px;
}

[data-fitts-comparison][data-fitts-design-approved-v6] > [data-fitts-reset] {
  margin: 0;
}

[data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-input-note {
  margin: 20px 0 0;
}

/* The existing native figure is an inline-size container. Narrow reader columns
 * stack labels above geometry before a side label can squeeze the measured stage.
 * 16px lane inset + the shared 1px border preserves the old mobile inner width. */
@container (max-width: 620px) {
  [data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-controls {
    padding: 16px;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls > :is([data-fitts-width-label], [data-fitts-distance-label]) {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto 48px;
    flex-basis: 100%;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls input[type="range"] {
    grid-column: 1;
    grid-row: 2;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls output {
    grid-column: 2;
    grid-row: 2;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "reason" "stage" "values" "status";
    grid-template-rows: auto;
    padding: 16px;
    row-gap: 8px;
  }
}

/* Match the current mobile breakpoint even when a tablet's article is >620px. */
@media (max-width: 760px) {
  [data-fitts-comparison][data-fitts-design-approved-v6] > .fitts-controls {
    padding: 16px;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls > :is([data-fitts-width-label], [data-fitts-distance-label]) {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-rows: auto 48px;
    flex-basis: 100%;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls input[type="range"] {
    grid-column: 1;
    grid-row: 2;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-controls output {
    grid-column: 2;
    grid-row: 2;
  }
  [data-fitts-comparison][data-fitts-design-approved-v6] .fitts-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "reason" "stage" "values" "status";
    grid-template-rows: auto;
    padding: 16px;
    row-gap: 8px;
  }
}