/* Hosted legal documents */

body.legal { background: var(--surface); }

.doc-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  min-width: 0;
}
.doc-shell > * { min-width: 0; }

.doc-head {
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-sunken);
}
/* With the island present the brand is already on screen, so the page header
   steps back to naming the document. */
body:has(.nav) .doc-head { background: transparent; border-bottom: 0; }
body:has(.nav) .doc-head-inner { padding-top: 8px; }
body:has(.nav) .doc-mark { display: none; }
.doc-head-inner { display: flex; align-items: center; gap: 14px; padding: 20px 0; flex-wrap: wrap; min-width: 0; }
.doc-head-inner > div:not(.actions) { min-width: 0; }
.doc-mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--accent, #635bff); color: #fff;
  display: grid; place-items: center; font-weight: 640; font-size: 16px; overflow: hidden;
}
.doc-mark img { width: 100%; height: 100%; object-fit: cover; }
.doc-head h1 { font-size: 18px; }
.doc-head p { font-size: 13px; color: var(--muted); margin-top: 2px; }
.doc-head .actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.doc-nav { position: sticky; top: 24px; display: grid; gap: 2px; padding-top: 40px; min-width: 0; }
.doc-nav-label {
  font-size: 11px; font-weight: 640; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--faint); padding: 0 10px 8px;
}
.doc-nav a {
  display: block; padding: 7px 10px; border-radius: var(--r-sm);
  font-size: 13.5px; color: var(--body); font-weight: 500;
}
.doc-nav a:hover { background: var(--surface-sunken); color: var(--navy); }
.doc-nav a.is-active { background: var(--brand-wash); color: var(--brand-dark); font-weight: 560; }

.doc-body { padding: 40px 0 80px; max-width: min(74ch, 100%); min-width: 0; }
.doc-body p, .doc-body li { overflow-wrap: anywhere; }
.doc-body h1 { font-size: 32px; margin-bottom: 6px; }
.doc-body h2 { font-size: 20px; margin: 36px 0 12px; }
.doc-body h3 { font-size: 16px; margin: 26px 0 8px; }
.doc-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.7; }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { margin: 6px 0; font-size: 15px; line-height: 1.65; }
.doc-body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 28px 0; }
.doc-body code { background: var(--surface-sunken); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.doc-body p > a,
.doc-body li > a { text-decoration: underline; text-underline-offset: 2px; }

.doc-body blockquote {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-radius: var(--r-md);
  background: var(--amber-wash);
  color: #7a4708;
  font-size: 14px;
  line-height: 1.6;
  border-left: 3px solid var(--amber);
}
.doc-body blockquote strong { color: #5c3505; }

.doc-table { overflow-x: auto; margin: 0 0 20px; }
.doc-table table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 360px; }
.doc-table th {
  text-align: left; padding: 9px 14px;
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--line);
}
.doc-table td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; line-height: 1.55; }

.doc-index { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 30px; }

/* A bordered list, not a stack of cards, the titles carry the hierarchy. */
.doc-card {
  display: grid;
  gap: 3px;
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
  text-decoration: none;
  transition: background var(--speed) var(--ease);
}
.doc-card:last-child { border-bottom: 1px solid var(--line-soft); }
.doc-card:hover { background: var(--surface-sunken); box-shadow: 0 0 0 12px var(--surface-sunken); }
.doc-card h3 { font-size: 16px; color: var(--navy); }
.doc-card p { font-size: 13.5px; color: var(--muted); margin: 0; text-decoration: none; }

.doc-foot {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  font-size: 13px; color: var(--muted);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

@media (max-width: 880px) {
  .doc-shell { grid-template-columns: 1fr; gap: 0; }
  .doc-nav {
    position: static; padding: 18px 0 0;
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; gap: 6px;
  }
  .doc-nav-label { display: none; }
  .doc-nav a { white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-soft); }
  .doc-body { padding-top: 24px; }
  .doc-body h1 { font-size: 26px; }
}

/* ------------------------------------------------------------ languages

   Switching language never changes the address: this URL is printed in an
   App Store listing, where changing it costs the customer a submission and
   a review, so it has to keep meaning one page in every language. */
.lang-select {
  height: 32px;
  padding: 0 28px 0 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink, #1a1f36);
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1px solid var(--line, #e3e8ee);
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
}
.lang-select:hover { border-color: #cfd7e3; }
.lang-select:focus-visible { outline: 2px solid var(--accent, #635bff); outline-offset: 1px; }

.lang-banner {
  margin: 0 0 18px;
  padding: 10px 13px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 8px;
}
.lang-banner[hidden] { display: none; }
/* A translation is a convenience, and the original still governs. Said in
   the calm colour, because it is a fact about the page, not a warning. */
.lang-note { background: #f6f9fc; color: #6b7c93; border: 1px solid #eef1f6; }
.lang-working { background: #f6f9fc; color: #6b7c93; border: 1px solid #eef1f6; }
.lang-warn { background: #fef5e7; color: #8c5e22; border: 1px solid #f2e0c0; }

/* A right-to-left document turns the prose round, not the furniture. */
[dir='rtl'] .doc-body { text-align: right; }