/* how-long-to-keep-documents — on top of the guide kit (pages/_guide.css).
   Two additions only: group rows inside a table (Households: tax, Companies …), and the date block in the
   product panel. The group-row block is the same on renewal-dates-south-africa and life-file-checklist. */

/* ---- group rows: a pale band with the mark's stroke, then the rows it heads */
html body .gd-table tr.gd-grp th {
  padding: 12px 24px 11px !important; border-top: 1px solid var(--gd-line); background: var(--gd-tint);
  color: #0b5cad; font: 650 12px/1.3 var(--font-sans); letter-spacing: .12em; text-transform: uppercase;
}
html body .gd-table tbody:first-of-type tr.gd-grp th { border-top: 0; }
html body .gd-table tr.gd-grp th::before {
  content: ""; display: inline-block; width: 3px; height: 12px; margin: 0 10px -1px 0; border-radius: 2px;
  background: var(--gd-blue); transform: var(--gd-stroke);
}
html body .gd-table tr.gd-grp + tr :is(th, td) { border-top: 0; }
@media (min-width: 641px) {
  html body .hk-table table { table-layout: fixed; }
  html body .hk-table thead th:nth-child(1) { width: 26%; }
  html body .hk-table thead th:nth-child(2) { width: 22%; }
  html body .hk-table thead th:nth-child(3) { width: 20%; }
  html body .hk-table thead th:nth-child(4) { width: 32%; }
  html body .hk-table td[data-label="Law"] { font-size: 14.5px; }
}

@media (max-width: 640px) {
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody tr.gd-grp {
    margin: 26px 0 10px; padding: 0 2px; border-radius: 0; background: transparent; box-shadow: none;
  }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody:first-of-type tr.gd-grp { margin-top: 4px; }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) tbody tr.gd-grp th {
    padding: 0 !important; border: 0; background: transparent; font-size: 12px;
  }
  html body .gd-table:has(td[data-label]):not(.gd-table--scroll) td[data-label]:empty { display: none; }
}

/* ---- the product panel */
html body .hk-files .gd-app-row { padding: 7px 0; }
html body .hk-files .gd-app-row > span:first-child { overflow: hidden; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
html body .gd-article .hk-date { margin: 2px 0 18px; }
html body .hk-date time { display: block; color: var(--gd-ink); font: 650 24px/1.2 var(--font-display); letter-spacing: -.02em; }
html body .hk-date span { display: block; margin-top: 4px; color: var(--gd-mute); font: 400 13px/1.45 var(--font-sans); }
html body .hk-chips { display: flex; flex-wrap: wrap; gap: 6px; }