/* Hallmark · Round 18 · layout-integrity: axis choices, kyusui mobile, supply-method bounds */

/* --- Group 1: axis choice labels — separate columns at 1280+ (extends round16 1024–1279) --- */
@media (min-width: 1280px) {
  #diagnostic .choice-group--axis-suido > label:has(input[value="running"]) {
    grid-column: 2 / span 3;
  }

  #diagnostic .choice-group--axis-suido > label:has(input[value="stopped"]) {
    grid-column: 6 / span 3;
  }

  #diagnostic .choice-group--axis-hasui > label:has(input[value="safe"]) {
    grid-column: 2 / span 2;
  }

  #diagnostic .choice-group--axis-hasui > label:has(input[value="unknown"]) {
    grid-column: 4 / span 2;
  }

  #diagnostic .choice-group--axis-hasui > label:has(input[value="unsafe"]) {
    grid-column: 6 / span 2;
  }
}

/* 「分からない」はヒント付きの独立行 — 隣接ラベルと重ならない */
@media (min-width: 1024px) {
  #diagnostic .choice-group--axis-hasui > label.choice--unknown {
    grid-column: 1 / -1;
    grid-row: 3;
    flex-direction: row;
    justify-self: stretch;
    width: 100%;
    max-width: none;
    text-align: left;
  }

  #diagnostic .choice-group--axis > label {
    min-width: 0;
  }
}

/* --- Group 2: category matrix cell text at 320 --- */
@media (max-width: 359px) {
  .article-body > .doc-stage--instrument {
    padding-inline: var(--space-2);
  }

  .article-body > .doc-stage--instrument .matrix-instrument {
    grid-template-columns: minmax(44px, 2.75rem) minmax(0, 1fr) minmax(0, 1fr);
  }

  .article-body > .doc-stage--instrument .matrix-cell__main,
  .article-body > .doc-stage--instrument .matrix-cell__sub {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* --- Group 2: product group headings on mobile --- */
@media (max-width: 767px) {
  .product-purpose-group__row,
  .water-comparison .product-purpose-group__row:first-child {
    display: block;
  }

  .product-purpose-group__row > th {
    display: block;
    width: 100%;
  }

  .product-purpose-group__heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .product-purpose-group__trace,
  .product-purpose-group__heading > span:last-child {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
  }
}

/* --- Group 2: category conclusion heading width at 768 --- */
@media (max-width: 768px) {
  .category-water-system > .category-conclusion {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

/* --- Group 3: product comparison within main bounds --- */
@media (max-width: 767px) {
  .product-comparison--water {
    margin-inline: 0;
    padding: var(--space-4) 0;
  }
}

/* --- Group 3: supply-method section — keep left edge, clamp right --- */
@media (min-width: 768px) {
  .category-water-system > .supply-method-section {
    width: min(
      35em,
      calc(100% - var(--ruler-guide-x) + var(--supply-method-extend)),
      calc(100% - var(--ruler-guide-x))
    );
    max-width: calc(100% - var(--ruler-guide-x));
    box-sizing: border-box;
  }
}