/* The legal pages (/privacy, /terms, /legal, /support, /delete-account): reading text under the
 * band (navy in the dark, pane white in the sun), no map, no app code. They load fonts.css,
 * styles.css (the tokens and the base) and components.css before this file, so both themes come
 * from the one token block. */

/* The band's brand lines up with the reading column below it. */
.legal-head {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 max(var(--s-5), calc((100% - 44rem) / 2 + var(--s-5)));
}

.legal-top {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  color: var(--text);
  text-decoration: none;
}

.legal-top .mark {
  width: 26px;
}

.legal-top .wordmark {
  font-size: var(--t-d1);
}

/* The theme chip (js/theme.js) at the band's right end. The landing's chip rules live in landing.css,
 * which these pages do not load, so its word switch is repeated here (the same two rules). */
.legal-head .landing-theme {
  margin-left: auto;
  color: var(--muted);
}

:where(:root:not([data-theme="light"])) .legal-head .landing-theme .theme-go-dark,
:where(:root[data-theme="light"]) .legal-head .landing-theme .theme-go-light {
  display: none;
}

.legal {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-7);
}

.legal h1 {
  margin: 0 0 var(--s-2);
  font: 800 italic var(--t-d3) / var(--lh-tight) var(--font-display);
  letter-spacing: var(--track-display);
}

.legal h2 {
  margin: var(--s-6) 0 var(--s-2);
  font: 800 italic var(--t-d1) / var(--lh-snug) var(--font-display);
  letter-spacing: var(--track-display);
}

.updated {
  margin: 0 0 var(--s-5);
  font-size: var(--t-meta);
  color: var(--faint);
}

.legal p,
.legal li {
  color: var(--muted);
}

.legal strong {
  color: var(--text);
}

.legal a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

.legal ul,
.legal ol {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: 6px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-meta);
}

.legal th,
.legal td {
  padding: var(--s-2) 6px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal th {
  color: var(--text);
}

.legal td {
  color: var(--muted);
}

.table-wrap {
  overflow-x: auto;
}

/* A phone reads the three-column table as one block per row: what, then why, then the legal
 * basis, each later cell named by its column, so nothing squeezes into 90 px columns. */
@media (max-width: 599px) {
  .stack thead {
    display: none;
  }

  .stack tr {
    display: block;
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
  }

  .stack td {
    display: block;
    padding: 2px 0;
    border: 0;
  }

  .stack td:nth-child(2)::before {
    content: "Why: ";
  }

  .stack td:nth-child(3)::before {
    content: "Legal basis: ";
  }

  .stack td:not(:first-child)::before {
    font-weight: 600;
    color: var(--text);
  }
}

/* The safety line in the terms: a raised block with a warning edge. */
.callout {
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  border-left: 4px solid var(--warn);
  background: var(--raise);
  box-shadow: var(--elev-1);
}

.legal .callout p {
  margin: 0;
  color: var(--text);
}

.delete-box {
  justify-items: start;
  margin: var(--s-5) 0;
}

.legal .delete-status {
  margin: 0;
}

.legal-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: var(--t-meta);
}

.legal .legal-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--faint);
}