/* Every checklist row uses the same columns, so a tag or button sits at the same place on every row.
   Hari, 6 Nov 2026: "they all should be aligned perfectly". Below 900px the page keeps its wrapping rows. */
@media (min-width: 900px) {
  .checklist li > div:not(.item-actions) { flex: 1 1 auto; min-width: 0; }
  .checklist li > .item-actions {
    flex: 0 0 auto; margin-left: 16px; display: grid;
    grid-template-columns: 84px 92px 160px 70px 92px; gap: 6px; align-items: center;
  }
  .item-actions > .ia-origin { grid-column: 1; grid-row: 1; text-align: center; }
  .item-actions > .ia-origin .origin-badge { margin-left: 0; }
  .item-actions > .ia-status { grid-column: 2; grid-row: 1; text-align: center; }
  .item-actions > .ia-main { grid-column: 3; grid-row: 1; }
  .item-actions > .ia-sub { grid-column: 3; grid-row: 2; }
  .item-actions > .ia-waive { grid-column: 4; grid-row: 1; }
  .item-actions > .ia-del { grid-column: 5; grid-row: 1; }
  .item-actions > button { width: 100%; white-space: nowrap; padding-left: 4px; padding-right: 4px; margin: 0; }
}

/* Narrow windows and phones (C-722): the row stacks, the title takes the full width and the controls wrap
   underneath it, so nothing is cut off or pushed past the edge. */
@media (max-width: 899px) {
  .checklist li { flex-wrap: wrap; align-items: flex-start; gap: 8px; }
  .checklist li > div:not(.item-actions) { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere; }
  .checklist li > .item-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-left: 0; }
  .item-actions > button { white-space: nowrap; }
}