/* DABB 2 — THE LEGAL PAGES (privacy, terms, refunds, revisions): a reading page IN THE SUN (AMENDMENT 7, base.css .in-sun:
   deep type on the bare, lifted sand), the site's header, one calm column of text, the footer.
   The text is the company's, word for word and in English only (src/parts/legal/<slug>.html); the frame is
   src/parts/23-legal-open.html / -close.html. The column is .legal__doc — always lang="en" dir="ltr", also on an Arabic page,
   where an Arabic line on top (.legal__note) says the text is published in English.
   The column: the long-reading measure of the blog's articles (43rem, about 68 characters), each numbered part under a hairline,
   its number hanging in the margin from 640 px. THE POLICIES (.legal__nav): after the text on a phone; from 1200 px in the start
   margin beside it, held in view (sticky) — the page's own twelve columns, as the article page (css/parts/21-blog.css).        */

.legal {
  --legal-measure: 43rem;
  --legal-top: calc(var(--band-h) + var(--header-h) + var(--s-8));      /* where the held policies / a part jumped to rest (clear of the trail's dabb under the bar) */
  --p-lh: calc(var(--lh-body) + 0.06);
  padding-block: calc(var(--band-h) + var(--header-h) + clamp(40px, 7vw, 104px)) clamp(96px, 11vw, 176px);
}
.legal__wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.legal__main { min-inline-size: 0; }

/* ───────── the text is English and left to right on BOTH pages: inside it, the Latin type system of :root (css/tokens.css), not
   the Arabic one an Arabic page sets on <html> — the same values, restated (keep them in step with tokens.css) ───────── */
html[lang="ar"] .legal__doc {
  --w-display: 500; --w-h2: 500; --w-h3: 600;
  --fs-h1: clamp(2.125rem, 1.429rem + 2.857vw, 4rem);
  --fs-h2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);
  --fs-h3: clamp(1.1875rem, 1.071rem + 0.476vw, 1.5rem);
  --fs-lead: clamp(1.0625rem, 0.993rem + 0.286vw, 1.25rem);
  --fs-body: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
  --fs-sm: 0.875rem;
  --fs-xs: clamp(0.6875rem, 0.664rem + 0.095vw, 0.75rem);
  --lh-head: 1.08; --lh-h2: 1.14; --lh-snug: 1.25; --lh-lead: 1.5; --lh-body: 1.6; --lh-sm: 1.5;
  --tr-head: -0.035em; --tr-h2: -0.028em; --tr-h3: -0.018em; --tr-label: 0.12em;
  --p-lh: calc(1.6 + 0.06);                                    /* (.legal's own was resolved from the Arabic leading) */
  font-size: var(--fs-body); line-height: var(--lh-body); text-align: left;
}
html[lang="ar"] .legal__doc .label { font-family: var(--f-mono); text-transform: uppercase; }      /* (base.css turns labels Arabic on an Arabic page) */
/* the English column on an Arabic page stands at the page's START (the right), under the Arabic line and beside the policies:
   one edge for all three — its own text still runs from the left */
html[dir="rtl"] .legal__doc > :is(.legal__head, .legal__body, .legal__ask) { margin-left: auto; }
html[dir="rtl"] .legal__note { margin-inline-start: 0; }

/* ───────── an Arabic page: the line on top — the text below is English ───────── */
.legal__note {
  display: flex; align-items: center; gap: var(--s-3); inline-size: fit-content; max-inline-size: 100%;
  margin-block-end: clamp(28px, 4vw, 48px); padding: 10px 18px 11px 16px; padding-inline: 16px 18px;
  border: var(--hair) solid var(--rule-2); border-radius: var(--r-pill);
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 500; color: var(--fg);
}
.legal__note-ico { inline-size: 18px; block-size: 18px; color: var(--fg-2); }

/* ───────── the head: Legal · the title · the lead · last updated ───────── */
.legal__head { display: grid; justify-items: start; max-inline-size: var(--legal-measure); padding-block-end: clamp(32px, 4.5vw, 56px); border-block-end: var(--hair) solid var(--rule-2); }      /* (its rule as long as the parts' rules below it) */
.legal__kicker { margin-block-end: var(--s-5); }
.legal__title { max-inline-size: 18ch; }
.legal__lead { max-inline-size: var(--legal-measure); margin-block-start: clamp(20px, 2.4vw, 32px); color: var(--fg-2); }
.legal__date { margin-block-start: var(--s-5); }
.legal__date time { font-variant-numeric: tabular-nums; }

/* ───────── the parts: each under a hairline, its number hanging in the margin (from 640 px) ───────── */
.legal__body, .legal__ask { max-inline-size: var(--legal-measure); }
.legal__sec {
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--s-2);
  padding-block: clamp(28px, 3.6vw, 44px);
  scroll-margin-block-start: var(--legal-top);
}
.legal__sec + .legal__sec { border-block-start: var(--hair) solid var(--rule); }
.legal__n { font-size: var(--fs-xs); font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; color: var(--fg-2); }
.legal__txt {
  min-inline-size: 0;
  font-size: calc(var(--fs-body) * 1.06); line-height: var(--p-lh);
  text-wrap: pretty; overflow-wrap: break-word;
}
.legal__txt > * + * { margin-block-start: 1em; }
.legal__h {
  font-family: var(--f-display); font-size: calc(var(--fs-h3) * 1.12); line-height: var(--lh-snug);
  letter-spacing: var(--tr-h3); font-weight: var(--w-h2); font-stretch: var(--sub-stretch); text-wrap: balance;
}
.legal__txt > .legal__h + * { margin-block-start: 0.7em; }
@media (min-width: 640px) {
  .legal__sec { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: 0; align-items: baseline; }
  .legal__n { padding-block-start: 0.1em; }                    /* on the heading's first line */
  .legal__ask { padding-inline-start: 3.5rem; }
}

/* the text's lists: a small dot, as in the articles */
.legal__txt ul { list-style: none; padding-inline-start: 1.5em; }
.legal__txt li { position: relative; }
.legal__txt li + li { margin-block-start: 0.55em; }
.legal__txt ul > li::before {
  content: ""; position: absolute; inset-inline-start: -1.3em; inset-block-start: calc((var(--p-lh) * 1em - 6px) / 2);
  inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--fg-2);
}
/* the e-mail inside the text: the site's link (the ink, a fine rule that becomes a marker stroke) */
.legal__txt a {
  color: inherit; text-decoration: none; font-weight: var(--w-strong);
  background: linear-gradient(var(--link-rule), var(--link-rule)) no-repeat 0 100% / 100% 2px;
  padding-block-end: 1px;
}
.legal__txt a:hover { background-size: 100% 100%; color: var(--link-hover-fg); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .legal__txt a { transition: background-size var(--t-2) var(--e-dash), color var(--t-2) var(--e-std); }
}

/* ───────── the close: the question, and where to write ───────── */
.legal__ask {
  display: grid; justify-items: start; gap: var(--s-3);
  margin-block-start: var(--s-3); padding-block-start: clamp(32px, 4vw, 48px);
  border-block-start: var(--hair) solid var(--rule-2);
}
.legal__ask-mail { font-size: var(--fs-lead); line-height: var(--lh-lead); margin-block-start: var(--s-1); }

/* ───────── THE POLICIES ───────── */
.legal__nav {
  display: grid; justify-items: start; gap: var(--s-3);
  max-inline-size: var(--legal-measure);
  margin-block-start: clamp(56px, 7vw, 88px); padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--rule-2);
}
.legal__list { display: grid; inline-size: 100%; }
.legal__link {
  position: relative; display: flex; align-items: center; min-block-size: 44px;
  padding-inline-start: 22px;
  color: var(--fg-2); text-decoration: none; font-weight: 500;
  font-size: var(--fs-body); line-height: 1.35;
}
.legal__link::before {                                         /* a short tick; the page being read: a longer one, in the ink */
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%;
  inline-size: 9px; block-size: var(--hair); background: var(--rule-2); transform-origin: 0 50%;
}
[dir="rtl"] .legal__link::before { transform-origin: 100% 50%; }
.legal__link:hover { color: var(--fg); }
.legal__link[aria-current] { color: var(--fg); font-weight: var(--w-strong); }
.legal__link[aria-current]::before { background: var(--fg); transform: scaleX(1.8); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.is-calm) .legal__link { transition: color var(--t-2) var(--e-std); }
  html:not(.is-calm) .legal__link::before { transition: transform var(--t-2) var(--e-dash), background-color var(--t-2) var(--e-std); }
}

/* ───────── from 1200 px: the page's twelve columns — the policies in the start margin, held in view; the text from the fourth ───────── */
@media (min-width: 1200px) {
  .legal__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
  .legal__main { grid-column: 4 / -1; grid-row: 1; }
  .legal__nav {
    grid-column: 1 / span 3; grid-row: 1;
    position: sticky; inset-block-start: var(--legal-top);
    max-inline-size: 15rem; margin-block-start: 0; padding-block-start: 0; border-block-start: 0;
    /* level with the kicker (an Arabic page: with the line on top) */
  }
  .legal__list { position: relative; }
  .legal__list::before {                                       /* the fine line the ticks hang from */
    content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0; inline-size: var(--hair); background: var(--rule-2); opacity: 0.55;
  }
  .legal__link { min-block-size: 40px; font-size: var(--fs-sm); }
}