/* The KitchenLocker legal pages — /kitchenlocker/privacy/ and
 * /kitchenlocker/terms/, also served as kitchenlocker.hyperc.dev/privacy and
 * /terms by the edge in hypercdev/hyperc-prd-01.
 *
 * tokens.css carries the canvas, type and link colors; this file is only the
 * shape of a long document read top to bottom. One component — the language
 * switch above the title — and nothing else: a legal page earns its keep by
 * being legible, printable and easy to find in your own language.
 *
 * Every page is published in English, Spanish, Portuguese, French, Japanese,
 * Simplified Chinese and Korean (render-legal.mjs, which also carries the one
 * script: the English page sends a first-time reader to their browser's
 * language). The webfonts are Latin subsets, so a Japanese, Chinese or Korean
 * page sets its text in the platform's own CJK face — the right one for the
 * reader, chosen by the page's lang. */

.legal {
  /* The column's side padding, named because the language switch runs its
   * row out through it to the edge of the screen and has to know how far. */
  --legal-gutter: var(--space-6);
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--legal-gutter) var(--space-16);
}

.legal h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}

/* The line under the title — issuer, effective date, status. */
.legal .doc-meta {
  color: var(--text-secondary);
  margin: 0 0 var(--space-8);
}

/* On a translated page, the line under that: this is a translation, and the
 * English text controls. The two read as one header, so the gap between them
 * closes where a browser can see the second line is there. */
.legal .doc-meta:has(+ .doc-notice) {
  margin-bottom: var(--space-2);
}

.legal .doc-notice {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-8);
}

.legal h2 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: var(--space-10) 0 var(--space-3);
}

.legal p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-relaxed);
}

.legal ul {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.legal li {
  margin: 0 0 var(--space-2);
  line-height: var(--leading-relaxed);
}

.legal li::marker {
  color: var(--text-tertiary);
}

/* The short version, set apart the way the reader should treat it: the one
 * block worth reading even if nothing else gets read. */
.legal blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-md);
}

.legal blockquote p {
  margin: 0;
}

.legal a:hover {
  text-decoration: underline;
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-8) 0;
}

.legal footer {
  margin-top: var(--space-16);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.legal footer p {
  margin: 0;
}

/* The language switch: every name above the title, each in its own language,
 * so a reader who cannot read the page can still find the way out of it — as
 * a row of chips that scrolls sideways rather than wraps. Seven names do not
 * fit across a phone; wrapped, they took two lines, and hidden in a menu they
 * took a click to discover. In one row, every translation is in sight and one
 * tap away, and on a narrow screen the row simply runs on past the edge. The
 * chips are ordinary links in a list, so the control needs no script at all.
 * The page's own language is the filled chip; on a screen too narrow for the
 * row, the page's script centres it — see pageScript() in render-legal.mjs. */
.lang-switch {
  margin: 0 0 var(--space-8);
  font-size: var(--text-sm);
}

/* The row runs through the column's gutter to the edge of the screen, and its
 * padding sets the first chip back in line with the title. A chip scrolling
 * out of view leaves at the edge of the screen rather than at a line drawn
 * short of it, and the one cut off there is what says the row goes on.
 *
 * A scroll container clips everything outside its padding box, the focus ring
 * included, so the row also pads a little above and below for the ring to
 * draw in. Those few pixels are taken back by an equal negative margin, which
 * keeps the chips and the space under them where the switch has always sat. */
.lang-switch ul {
  display: flex;
  gap: var(--space-2);
  margin: calc(var(--space-1) * -1) calc(var(--legal-gutter) * -1);
  padding: var(--space-1) var(--legal-gutter);
  /* A chip reached with Tab is scrolled in clear of the screen's edge. */
  scroll-padding-inline: var(--legal-gutter);
  list-style: none;
  overflow-x: auto;
  /* A swipe that reaches the end of the row stops there, rather than going on
   * to turn the browser back a page. */
  overscroll-behavior-x: contain;
  /* No scrollbar: the chip cut off at the edge of the screen already says the
   * row goes on, and a bar under the chips only crowded them. The row still
   * scrolls by swipe, trackpad, Shift with the mouse wheel, and Tab, which
   * brings each chip into view as it takes focus. */
  scrollbar-width: none;
}

/* The same for older Safari and Chrome, which predate the standard property
 * and know only the pseudo-element. */
.lang-switch ul::-webkit-scrollbar {
  display: none;
}

.lang-switch li {
  flex: none;
  margin: 0;
}

.lang-switch a {
  display: block;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  /* Set here: the list item it sits in carries body copy's looser leading. */
  line-height: var(--leading-normal);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch a:hover {
  color: var(--text-primary);
  border-color: var(--border-default);
  text-decoration: none;
}

/* The design system's brand ring. The transparent outline draws nothing until
 * forced colours drop box-shadow — then it is painted, and is the ring. */
.lang-switch a:focus-visible {
  outline: 2px solid transparent;
  box-shadow: var(--focus-ring);
}

/* The weight is not redundant beside the fill: forced colours repaint every
 * chip's border and background alike, and leave the type as it is. */
.lang-switch a[aria-current="page"] {
  color: var(--text-primary);
  background: var(--brand-subtle);
  border-color: var(--brand-border);
  font-weight: var(--weight-semibold);
}

/* The display tracking is tuned for Latin letterforms; Japanese, Chinese and
 * Korean headings are set without it. */
.legal:lang(ja) h1,
.legal:lang(ja) h2,
.legal:lang(zh) h1,
.legal:lang(zh) h2,
.legal:lang(ko) h1,
.legal:lang(ko) h2 {
  letter-spacing: var(--tracking-normal);
}

@media print {
  .lang-switch {
    display: none;
  }
}

@media (max-width: 480px) {
  .legal {
    --legal-gutter: var(--space-5);
    padding: var(--space-8) var(--legal-gutter) var(--space-12);
  }

  .legal h1 {
    font-size: var(--text-xl);
  }
}