/* DIMMS Lab. Privacy page.
   Loaded after assets/css/dimms.css, which holds the tokens and the shared components. */

.dl-privacy {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}

/* The list of sections stays in view beside the text on wide screens */
.dl-privacy__nav { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.dl-privacy__toc {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
  counter-reset: privacy;
}
.dl-privacy__toc li { border-bottom: 1px solid var(--rule); counter-increment: privacy; }
.dl-privacy__toc a {
  display: grid;
  grid-template-columns: var(--space-6) minmax(0, 1fr);
  padding-block: var(--space-3);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease);
}
.dl-privacy__toc a::before {
  content: counter(privacy, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--lh-small);
  color: var(--ink-3);
}
.dl-privacy__toc a:hover { color: var(--teal); }

.dl-privacy__body { min-width: 0; max-width: var(--measure); }
.dl-privacy__updated { margin: 0 0 var(--space-6); font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }
.dl-privacy__body .dl-prose > h2:first-child { margin-top: 0; }

/* Four plain facts, set as a ruled row */
.dl-privacy__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  font-family: var(--font-sans);
  font-variant-numeric: normal;
}
.dl-privacy__facts > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-strong);
}
.dl-privacy__facts dt { margin-top: var(--space-1); font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-3); }
.dl-privacy__facts dd { margin: 0; font-family: var(--font-serif); font-size: var(--text-h4); line-height: var(--lh-h4); color: var(--ink); }

@media (max-width: 1024px) {
  .dl-privacy { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .dl-privacy__nav { position: static; max-width: var(--measure); }
}
@media (max-width: 768px) {
  .dl-privacy__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}