/* Public company policy page: /{route}.
 *
 * A legal document rather than a marketing page: no cards, glows, badges or
 * entrance animation. A centred title over a hairline rule, and one calm
 * reading column set in a serif face, as printed
 * terms are. On wide screens a quiet "Contents" list sits in the left margin
 * and follows the reader; the text column stays centred either way. Dark
 * theme from theme-dark.css (`.user-body--dark`); header and footer from
 * site.css; document typography from rich-content.css, tuned through its
 * --rc-* properties. Prints as clean black-on-white.
 *
 * Fluid sizing, like the site header and the Help pages: every text size,
 * space and width below is a clamp() that grows with the viewport width,
 * from a phone minimum (~360px) to a large-monitor maximum (~2560px). The
 * reading column is measured in units of the body text size, so a line keeps
 * a comfortable length on every device: the whole page scales up on a large
 * monitor instead of leaving a thin strip of small text in the middle.
 */

.policy-body {
  --policy-bg: #0c0c0f;
  --policy-text: #d9d9de;
  --policy-strong: #f4f4f6;
  --policy-muted: #9a9aa5;
  --policy-faint: #6f6f7a;
  --policy-rule: rgba(255, 255, 255, 0.1);
  --policy-rule-strong: rgba(255, 255, 255, 0.22);
  --policy-tint: rgba(255, 255, 255, 0.035);
  --policy-accent: var(--color-brand);

  /* System serif faces only: nothing is downloaded and the CSP stays strict. */
  --policy-serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria,
    Georgia, "Times New Roman", serif;

  /* Fluid type: 16px body on a phone, about 20px at 1440px, 24px at most. */
  --policy-fs-body: clamp(1rem, 0.86rem + 0.42vw, 1.5rem);
  --policy-fs-small: clamp(0.8125rem, 0.72rem + 0.26vw, 1.125rem);
  --policy-fs-label: clamp(0.6875rem, 0.62rem + 0.2vw, 0.9375rem);
  --policy-fs-title: clamp(2rem, 1.15rem + 3.4vw, 5.5rem);

  /* Fluid space */
  --policy-space-xs: clamp(0.5rem, 0.4rem + 0.3vw, 0.875rem);
  --policy-space-sm: clamp(0.75rem, 0.55rem + 0.5vw, 1.25rem);
  --policy-space-md: clamp(1rem, 0.7rem + 0.8vw, 1.75rem);
  --policy-space-lg: clamp(1.5rem, 1rem + 1.4vw, 3rem);
  --policy-space-xl: clamp(2rem, 1.2rem + 2.4vw, 4.5rem);
  --policy-space-2xl: clamp(3rem, 1.8rem + 3.6vw, 7rem);

  /* Widths: about 36 body-text ems per line (roughly 75-85 characters). */
  --policy-measure: calc(var(--policy-fs-body) * 36);
  --policy-rail: clamp(12rem, 8rem + 7vw, 20rem);
  --policy-gutter: var(--site-header-gutter);

  background-color: var(--policy-bg);
  color: var(--policy-text);
}

.policy-main {
  padding: var(--policy-space-2xl) var(--policy-gutter) calc(var(--policy-space-2xl) * 1.2);
}

/* --------------------------------------------------------------- Title */

.policy-head {
  max-width: calc(var(--policy-measure) + 6rem);
  margin: 0 auto var(--policy-space-xl);
  text-align: center;
}

.policy-head__kicker {
  margin-bottom: var(--policy-space-sm);
  color: var(--policy-muted);
  font-size: var(--policy-fs-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.policy-head__title {
  color: var(--policy-strong);
  font-family: var(--font-brand);
  font-size: var(--policy-fs-title);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* --------------------------------------------------------------- Layout */

.policy-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--policy-measure));
  justify-content: center;
}

/* Wide screens: contents in the left margin, an equal empty margin on the
   right, so the text column stays in the middle of the page. The text
   column may shrink (minmax) on the narrowest of these screens, so the three
   columns never overflow the window. */
@media (min-width: 1280px) {
  .policy-grid--outlined {
    grid-template-columns: var(--policy-rail) minmax(0, var(--policy-measure)) var(--policy-rail);
    grid-template-areas: "rail column .";
    column-gap: var(--policy-space-xl);
  }

  .policy-grid--outlined .policy-column {
    grid-area: column;
  }

  .policy-grid--outlined .policy-contents--rail {
    grid-area: rail;
  }
}

/* The thin rule under the title opens the document. */
.policy-column {
  min-width: 0;
  border-top: 1px solid var(--policy-rule-strong);
}

/* ------------------------------------------------------------- Contents */

.policy-contents__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.policy-contents__link {
  display: block;
  padding: 0.45em 0 0.45em 1em;
  border-left: 1px solid var(--policy-rule);
  color: var(--policy-muted);
  font-size: var(--policy-fs-small);
  line-height: 1.45;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.policy-contents__link:hover {
  color: var(--policy-strong);
  text-decoration: none;
}

.policy-contents__link[aria-current="location"] {
  border-left-color: var(--policy-accent);
  color: var(--policy-strong);
}

/* In the margin (wide screens only). */
.policy-contents--rail {
  display: none;
}

@media (min-width: 1280px) {
  .policy-contents--rail {
    display: block;
    position: sticky;
    top: calc(var(--site-header-height) + var(--policy-space-lg));
    align-self: start;
    max-height: calc(100dvh - var(--site-header-height) - 2 * var(--policy-space-lg));
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .policy-contents--inline {
    display: none;
  }
}

.policy-contents__heading {
  margin-bottom: var(--policy-space-sm);
  color: var(--policy-faint);
  font-size: var(--policy-fs-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Above the text (phones, tablets and small laptops): a quiet fold-out list. */
.policy-contents--inline {
  margin-top: var(--policy-space-md);
  border-bottom: 1px solid var(--policy-rule);
}

.policy-contents__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding-block: var(--policy-space-xs);
  color: var(--policy-muted);
  font-size: var(--policy-fs-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.policy-contents__summary::-webkit-details-marker {
  display: none;
}

.policy-contents__summary::after {
  content: "+";
  font-size: 1.6em;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  letter-spacing: 0;
}

.policy-contents--inline[open] > .policy-contents__summary::after {
  content: "\2212";
}

.policy-contents--inline .policy-contents__list {
  padding-bottom: var(--policy-space-md);
}

/* ----------------------------------------------------------------- Text */

.policy-text {
  --rc-font-size: var(--policy-fs-body);
  --rc-line-height: 1.75;
  --rc-text: var(--policy-text);
  --rc-heading: var(--policy-strong);
  --rc-muted: var(--policy-muted);
  --rc-accent: var(--policy-rule-strong);
  --rc-link: var(--policy-strong);
  --rc-line: var(--policy-rule);
  --rc-line-strong: var(--policy-rule-strong);
  --rc-tint: var(--policy-tint);
  --rc-block-gap: 1.1em;

  margin-top: var(--policy-space-lg);
  font-family: var(--policy-serif);
}

/* Headings stay in the site's sans face: the serif carries the reading,
   the sans gives the document its structure. Sizes are relative to the
   fluid body text, so they scale with it. */
.policy-text h2,
.policy-text h3,
.policy-text h4 {
  font-family: var(--font-brand);
  letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--site-header-height) + var(--policy-space-lg));
}

.policy-text h2 {
  margin-top: 2.4em;
  font-size: 1.4em;
}

.policy-text h3 {
  font-size: 1.15em;
}

.policy-text h4 {
  color: var(--policy-muted);
  font-size: 0.95em;
}

.policy-text strong,
.policy-text b {
  color: var(--policy-strong);
}

/* Long addresses and unbroken strings wrap instead of widening the page. */
.policy-text a {
  overflow-wrap: anywhere;
  text-decoration-color: var(--policy-faint);
}

.policy-text a:hover {
  text-decoration-color: var(--policy-strong);
}

.policy-text blockquote {
  border-radius: 0;
  background: none;
  font-style: italic;
}

/* Tables read as part of the document: rules between rows, no boxes. Wide
   tables scroll sideways inside their own region (rich-content.css). */
.policy-text table {
  font-family: var(--font-sans);
  font-size: 0.88em;
}

.policy-text th,
.policy-text td {
  border-width: 0 0 1px;
}

.policy-text th {
  border-bottom-color: var(--policy-rule-strong);
  background: none;
  color: var(--policy-strong);
}

.policy-text .rc-table-scroll {
  border-radius: 0;
}

/* -------------------------------------------------------- Other policies */

.policy-related {
  margin-top: var(--policy-space-2xl);
  padding-top: var(--policy-space-lg);
  border-top: 1px solid var(--policy-rule-strong);
}

.policy-related__heading {
  margin-bottom: var(--policy-space-sm);
  color: var(--policy-faint);
  font-size: var(--policy-fs-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

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

.policy-related__link {
  display: inline-block;
  padding-block: 0.4em;
  color: var(--policy-text);
  font-size: calc(var(--policy-fs-body) * 0.95);
  text-decoration: underline;
  text-decoration-color: var(--policy-faint);
  text-underline-offset: 0.25em;
}

.policy-related__link:hover {
  color: var(--policy-strong);
  text-decoration-color: var(--policy-strong);
}

.policy-body :focus-visible {
  outline: 2px solid var(--policy-accent);
  outline-offset: 3px;
}

/* --------------------------------------------------------- Small phones */

@media (max-width: 380px) {
  /* A touch more room at the edges than the header's minimum gutter. */
  .policy-main {
    padding-inline: max(var(--policy-gutter), 1.125rem);
  }

  .policy-text {
    --rc-line-height: 1.7;
  }
}

/* ----------------------------------------------------------------- Print */

@media print {
  .policy-body {
    --policy-text: #111;
    --policy-strong: #000;
    --policy-muted: #444;
    --policy-faint: #666;
    --policy-rule: #bbb;
    --policy-rule-strong: #777;
    --policy-tint: transparent;
    --policy-fs-body: 11pt;
    --policy-fs-title: 24pt;

    background: #fff;
    color: #000;
  }

  .site-header,
  .site-footer,
  .skip-link,
  .policy-contents,
  .policy-related {
    display: none !important;
  }

  .policy-main {
    padding: 0;
  }

  .policy-grid {
    display: block;
  }

  .policy-text h2,
  .policy-text h3,
  .policy-text h4 {
    break-after: avoid;
  }

  .policy-text table,
  .policy-text blockquote {
    break-inside: avoid;
  }
}