/* #tools: tool strip (owner P1). CALL-E P03 "Clothesline index" (webuiexample #contents: one cord across 1264 px,
   numbered paper tags spread with space-between; mobile .grid2 = 2-up rows with one cord per row, site.css L1566-1582).
   The tool list items appear once each (no clones). Semantic variables only. */

#tools .tools-row { margin-top: 44px; }
/* tag scale follows CALL-E's #contents index tags (20 px labels) */
#tools .tag { display: grid; gap: 14px; min-width: 132px; padding: 16px 18px 18px; }
#tools .tag-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
#tools .tag .num { line-height: 1; }
#tools .tag .logo { display: block; flex: none; width: 24px; height: 24px; }
#tools .tag .lbl { margin-top: 0; font-size: 20px; line-height: 1.15; white-space: nowrap; }

/* 992-1199: same single cord, tags a little tighter so 7 fit between the gutters */
@media (992px <= width <= 1199px) {
  #tools .tag { min-width: 0; padding: 14px 14px 15px; }
  #tools .tag-top { gap: 12px; }
  #tools .tag .lbl { font-size: 18px; }
}

/* 768-991: two rows (4 + 3) with one painted cord per row, same mechanics as the kit's .grid2 */
@media (768px <= width <= 991px) {
  #tools .tools-row {
    --h: 84px; --gap: 52px; --pitch: calc(var(--h) + var(--gap));
    flex-wrap: wrap; justify-content: center; column-gap: 16px; row-gap: var(--gap);
    margin-inline: calc(-1 * var(--gut)); padding: 36px var(--gut) 8px;
    background:
      var(--cord-img) repeat-x 0 12px / 12px 28px,
      var(--cord-img) repeat-x 0 calc(12px + var(--pitch)) / 12px 28px;
  }
  #tools .tools-row > .cord { display: none; }
  #tools .tools-row > .hg { flex: 0 0 calc((100% - 3 * 16px) / 4); }
  #tools .tools-row > .hg > .tag { height: var(--h); }
}

/* fixed 84 px tags below 992: keep the bigger type but tighten the inside so it fits */
@media (width <= 991px) {
  #tools .tag { gap: 10px; padding: 14px 14px 13px; }
  #tools .tag .lbl { font-size: 18px; }
}

/* phones: .grid2 (kit) = 2-up rows, 4 cords, last tag centred */
@media (width <= 767px) {
  #tools .tools-row { --h: 84px; --gap: 52px; margin-top: 36px; }
  #tools .tag { min-width: 0; padding: 14px 14px 12px; }
  #tools .tag .lbl { font-size: 17px; }
}