/* Hallmark · Round 16 · tick-bound origin, content-bound width; minor proximity & contrast */

/* --- MAJOR: 給水方式の違い — left edge at tick, width from content --- */
@media (min-width: 768px) {
  .category-water-system {
    --ruler-guide-x: 66.6667%;
    --supply-method-extend: 360px;
  }

  .category-water-system > .supply-method-section {
    box-sizing: border-box;
    width: min(35em, calc(100% - var(--ruler-guide-x) + var(--supply-method-extend)));
    max-width: 100%;
    margin-right: 0;
    margin-left: var(--ruler-guide-x);
    padding-left: 0;
  }

  .category-water-system > .supply-method-section .supply-method-axis__notes,
  .category-water-system > .supply-method-section .supply-method-axis__bridge,
  .category-water-system > .supply-method-section .supply-method-axis > figcaption {
    width: 100%;
    margin-left: 0;
  }

  .category-water-system > .supply-method-section .supply-method-axis__notes {
    grid-template-columns: 1fr;
  }

  .category-water-system > .supply-method-section .supply-method-axis__note--direct,
  .category-water-system > .supply-method-section .supply-method-axis__note--tank {
    grid-column: 1;
    grid-row: auto;
  }
}

/* --- MINOR 1: mobile calc rail — tighten shortage label → figure only --- */
@media (max-width: 767px) {
  .calc-rail__node--shortage .calc-rail__node-value {
    bottom: calc(var(--rail-tick-length) + 22px);
  }

  .calc-rail__node--shortage .gap-bracket__result {
    gap: 0;
  }

  .calc-rail__node--shortage .gap-bracket__result strong + span {
    margin-left: 1px;
  }
}

/* --- MINOR 2: p1 desktop — instrument frame yields to rail grammar --- */
@media (min-width: 768px) {
  .scale-calc {
    border-top-color: var(--color-rule-soft);
  }
}

/* --- MINOR 3: p1 desktop dark — soften product row rules, keep ticks/scale --- */
@media (min-width: 768px) {
  :root[data-theme="dark"] #products .product-table th,
  :root[data-theme="dark"] #products .product-table td,
  :root[data-theme="dark"] .category-products .water-comparison th,
  :root[data-theme="dark"] .category-products .water-comparison td {
    border-bottom-color: color-mix(in srgb, var(--color-rule-soft) 85%, var(--surface-work));
  }

  :root[data-theme="dark"] #products .product-table th,
  :root[data-theme="dark"] .category-products .water-comparison th {
    border-bottom-color: color-mix(in srgb, var(--color-rule) 85%, var(--surface-work));
  }
}

/* --- MINOR 4: p2 mobile — +4px header → first product --- */
@media (max-width: 767px) {
  .water-comparison > .product-purpose-group:first-of-type .product-purpose-group__row > th {
    padding-bottom: calc(var(--space-2) + 4px);
  }
}

/* --- MINOR 5: p2 desktop light — share one structural baseline with dark --- */
@media (min-width: 768px) {
  :root:not([data-theme="dark"]) .category-water-system > .category-conclusion {
    margin-block: 28px;
    padding: var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-rule);
    background: transparent;
  }

  :root:not([data-theme="dark"]) .article-body > .category-conclusion {
    margin-block: 28px;
    padding: var(--space-5);
    border: 0;
    border-bottom: 1px solid var(--color-rule);
    background: transparent;
  }
}

/* --- layout-integrity: separate overlapping axis labels at 1024px --- */
@media (min-width: 1024px) and (max-width: 1279px) {
  #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;
  }
}