/* Legal: the imprint and the privacy policy as pages in the kit's dialog (size 'page'), laid out like the jobs page.
   On wide screens the title and the key facts stay on the left while the text scrolls on the right; below 900 px it
   is one column. Tokens only. */

/* A page to read: the glass turns almost opaque, so nothing on the page beneath shows through the text. */
.legal-dialog .dialog__panel {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}
.legal-dialog .dialog__body {
  padding: 0;
}

.legal {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.3fr);
  gap: var(--space-9);
  padding: var(--space-8) var(--space-9) var(--space-10);
}

.legal__aside {
  position: sticky;
  top: var(--space-8);
  align-self: start;
  display: grid;
  justify-items: start;
  gap: var(--space-5);
}
.legal__aside .rule-label {
  color: var(--ink-muted);
}
.legal__title {
  font-size: clamp(34px, 3.4vw, 52px);
}
.legal__intro {
  max-width: 34ch;
  color: var(--ink-muted);
}
.legal__facts {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  margin: 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}
.legal__facts dt {
  color: var(--ink-muted);
}
.legal__facts dd {
  margin: var(--space-1) 0 0;
}
.legal__updated {
  color: var(--ink-faint);
}

.legal__main {
  display: grid;
  gap: var(--space-7);
  max-width: 680px;
  line-height: var(--leading-text);
}
.legal__section {
  display: grid;
  gap: var(--space-3);
}
.legal__section .rule-label {
  color: var(--ink-muted);
}
.legal strong {
  font-weight: 600;
}
.legal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.legal a:hover {
  color: var(--accent-strong);
}

@media (max-width: 900px) {
  .legal {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7);
    padding: var(--space-8) var(--space-6) var(--space-9);
  }
  .legal__aside {
    position: static;
  }
}
@media (max-width: 599.98px) {
  .legal {
    padding: var(--space-7) var(--space-5) var(--space-8);
  }
  .legal__main {
    gap: var(--space-6);
  }
}