/* The legal and help pages' layout. Every colour, size, radius, font and
   shadow comes from brand.css (generated from the app's brand tokens, as for
   the account-deletion page): this file only arranges them. */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page-backdrop);
  color: var(--on-surface);
  font-family: var(--font-text);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: var(--body-tracking);
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-lg) var(--space-xxxl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  overflow-wrap: break-word;
}

.masthead { display: grid; gap: var(--space-xs); justify-items: start; }
.masthead .icon { width: var(--icon-size); height: var(--icon-size); border-radius: var(--icon-radius); }
.masthead p { margin: 0; }

.eyebrow {
  color: var(--primary);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--headline-size);
  line-height: var(--headline-line);
  font-weight: var(--headline-weight);
  letter-spacing: var(--headline-tracking);
}

.card {
  background: var(--card-surface);
  border: var(--card-border);
  border-radius: var(--card-radius);
  clip-path: var(--card-clip);
  box-shadow: var(--card-shadow);
  padding: var(--space-xl);
  min-width: 0;
}

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }

.prose h2 {
  margin: var(--space-xl) 0 var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--title-size);
  line-height: var(--title-line);
  font-weight: var(--title-weight);
  letter-spacing: var(--title-tracking);
}

.prose h3 {
  margin: var(--space-lg) 0 var(--space-xs);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: var(--label-weight);
}

.prose p { margin: 0 0 var(--space-md); }

.prose ul,
.prose ol { margin: 0 0 var(--space-md); padding-left: var(--space-xl); }
.prose li { margin-bottom: var(--space-xs); }
.prose li > ul,
.prose li > ol { margin: var(--space-xs) 0 0; }

.prose blockquote {
  margin: 0 0 var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-container);
  border-radius: var(--control-radius);
}

.prose code { font-family: var(--font-numeric); }

.table { overflow-x: auto; margin: 0 0 var(--space-md); }

.prose table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--small-size);
  line-height: var(--small-line);
}

.prose th,
.prose td {
  text-align: start;
  vertical-align: top;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--field-border-width) solid var(--outline);
}

.prose th { font-weight: var(--label-weight); }

.muted { color: var(--on-surface-variant); }
.small { font-size: var(--small-size); line-height: var(--small-line); }

.footer { display: grid; gap: var(--space-sm); }
.footer p { margin: 0; }

.links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
}

.links a[aria-current="page"] { color: var(--on-surface); font-weight: var(--label-weight); text-decoration: none; }

a { color: var(--primary); }

:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }