/* ==========================================================================
   LEECOI — Prose pages (privacy, terms, contact)
   ==========================================================================

   Long-form reading, so the job is measure, rhythm and navigation. A privacy
   policy nobody can find their way around is a privacy policy nobody reads,
   which defeats the point of writing an honest one.
   ========================================================================== */

/* ==========================================================================
   LAYOUT
   --------------------------------------------------------------------------
   Contents rail beside the text on wide screens, above it on narrow. The rail
   comes SECOND in the DOM so a screen-reader user reaches the content first
   and is not made to walk a table of contents before every visit.
   ========================================================================== */

.prose-layout {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

/* A prose page with no contents rail is one column, centred on its measure
   rather than pinned left in a column sized for a rail that is not there. */
.prose-layout:not(:has(.toc)) {
  max-inline-size: 46rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .prose-layout {
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: var(--space-4xl);

    /* Bounded and centred rather than filling the container. `.prose` caps its
       own measure at 44rem, so an unbounded grid column left roughly 350px of
       dead space between the text and the rail at desktop widths, which reads
       as two unrelated columns rather than one article with its contents. */
    max-inline-size: 66rem;
    margin-inline: auto;
  }
}

/* ---- Contents rail ------------------------------------------------------ */
.toc {
  order: -1;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

@media (min-width: 64rem) {
  .toc {
    order: 0;
    /* Follows the reader down the page. The offset clears the fixed header,
       reading the same token the header itself uses. */
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-lg));
    background: none;
    border: 0;
    border-inline-start: 1px solid var(--line);
    border-radius: 0;
    padding: var(--space-xs) 0 var(--space-xs) var(--space-lg);
  }
}

.toc__title {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  line-height: var(--step-micro-lh);
  letter-spacing: var(--step-micro-ls);
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--space-md);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  counter-reset: toc;
}

.toc__link {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;

  /* 24px minimum target, per WCAG 2.2 SC 2.5.8. */
  min-block-size: 1.5rem;
  padding-block: 0.125rem;

  font-size: var(--step-small);
  line-height: 1.45;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-ui);
}

.toc__link:hover {
  color: var(--ink);
}

/* The number is a real position in a real sequence, and it is what someone
   quotes when they refer to a clause. */
.toc__link::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   PROSE
   ========================================================================== */

.prose {
  max-width: 44rem;
}

.prose > * + * {
  margin-block-start: var(--space-md);
}

.prose h2 {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);

  margin-block-start: var(--space-3xl);
  padding-block-start: var(--space-lg);
  border-block-start: 1px solid var(--line);

  /* Anchor targets clear the fixed header when jumped to from the rail. */
  scroll-margin-top: calc(var(--header-h) + var(--space-lg));
}

.prose h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.prose h3 {
  font-size: var(--step-body);
  font-weight: var(--weight-semi);
  margin-block-start: var(--space-xl);
}

.prose p,
.prose li {
  color: var(--muted);
  line-height: 1.75;
}

.prose ul,
.prose ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-inline-start: var(--space-lg);
}

.prose ul {
  list-style: disc outside;
}

.prose ol {
  list-style: decimal outside;
}

.prose li::marker {
  color: var(--accent-strong);
}

.prose a:not(.btn):not(.link-action) {
  color: var(--link);
  text-decoration: underline;
}

.prose strong {
  color: var(--ink);
  font-weight: var(--weight-semi);
}

/* A definition list, used where the page pairs a thing with what happens to
   it: which field, and why it is collected. */
.prose dl {
  display: grid;
  gap: var(--space-sm) var(--space-lg);
  margin-block-start: var(--space-lg);
}

@media (min-width: 40rem) {
  .prose dl {
    grid-template-columns: 12rem minmax(0, 1fr);
  }
}

.prose dt {
  font-family: var(--font-mono);
  font-size: var(--step-small);
  color: var(--ink);
}

.prose dd {
  margin: 0;
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.7;
}

@media (max-width: 39.999rem) {
  .prose dd {
    padding-block-end: var(--space-sm);
    border-block-end: 1px solid var(--line);
  }
}

/* ---- Last updated ------------------------------------------------------- */
.prose__updated {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ==========================================================================
   CONTACT
   ========================================================================== */

.contact-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-lg);
}

.contact-route {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);

  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background-color: var(--panel);
}

.contact-route__label {
  font-family: var(--font-mono);
  font-size: var(--step-micro);
  line-height: var(--step-micro-lh);
  letter-spacing: var(--step-micro-ls);
  text-transform: uppercase;
  color: var(--muted);
}

.contact-route__value {
  font-size: var(--step-d3);
  line-height: var(--step-d3-lh);
  letter-spacing: var(--step-d3-ls);
  font-weight: var(--weight-semi);
  /* An email address is long and must be allowed to break rather than push the
     card wider than its column. */
  overflow-wrap: anywhere;
}

.contact-route__text {
  color: var(--muted);
  font-size: var(--step-small);
  line-height: 1.65;
  margin-block-end: var(--space-xs);
}

.contact-route__action {
  margin-block-start: auto;
}