/* 早見表は表が主役なので、絞り込みを上に横並びで置く（全幅の指定は page.js の layout: 'wide'）。 */
@media (min-width: 40rem) {
  .tool-inputs {
    grid-template-columns: repeat(3, minmax(0, 15rem));
  }
}

.size-count,
.size-empty {
  color: var(--ink-soft);
}

.size-empty {
  margin-top: 0.75rem;
  font-weight: 600;
}

.size-table caption {
  white-space: normal;
}

.size-table thead th {
  white-space: normal;
  vertical-align: bottom;
  min-width: 6.5em;
}

/* 製品名の列。横にスクロールしても左に残す。 */
.size-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  white-space: normal;
  min-width: 13rem;
  max-width: 18rem;
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.size-table .maker {
  display: block;
  color: var(--ink-soft);
  font-size: var(--step--1);
  font-weight: 400;
}

.size-table .group-row th {
  background: var(--water);
  border-bottom: 0;
  font-family: var(--font-head);
  font-weight: 600;
  text-align: left;
  padding: 0.35rem 0.75rem;
}

.size-table td small {
  display: block;
  white-space: normal;
  max-width: 9em;
  margin-left: auto;
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.4;
}

.size-table .links a {
  display: block;
  line-height: 1.6;
}

.size-table .links a + a {
  font-size: var(--step--1);
}

/* 狭い画面では、7列の表を横に送らなくても読めるように、1製品を1枚のカードに並べ替える。
   列見出しは隠し、各セルの data-label を見出しとして出す。 */
@media (max-width: 40rem) {
  .size-table,
  .size-table caption,
  .size-table tbody,
  .size-table .group-row,
  .size-table .group-row th {
    display: block;
  }

  .size-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .size-table tr[data-maker] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
    padding-block: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .size-table tr[data-maker] > th,
  .size-table tr[data-maker] > td {
    display: block;
    position: static;
    min-width: 0;
    max-width: none;
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .size-table tr[data-maker] > th,
  .size-table tr[data-maker] > td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .size-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-soft);
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .size-table td small {
    display: inline;
    margin-left: 0.35em;
  }

  .size-table td.links {
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
  }
}