/* Legal
 * /privacy and /terms — long-form prose, which the rest of this app has none
 * of. Everything else is cards, numbers and controls, so this file exists to
 * make a wall of text readable without inventing a second visual language.
 *
 * The one rule that matters: a measure of about 75 characters. Prose set the
 * full width of a desktop window is genuinely hard to read, because the eye
 * loses the line on the way back. Cards elsewhere cap at 900px; this caps
 * narrower on purpose.
 */

.legalwrap {
  /* Measured at 1280px: 604px of text, around 75 characters of Karla at this
     size — inside the 60–75 that prose is comfortable at, where the full
     window width is not. */
  max-width: 40rem;
  margin: 0 auto;
  padding: calc(32px + env(safe-area-inset-top, 0px))
           calc(18px + env(safe-area-inset-right, 0px))
           64px
           calc(18px + env(safe-area-inset-left, 0px));
}

.legalhead { text-align: center; margin-bottom: 28px; }
.legalhead .brand-mark { width: 52px; height: 52px; margin: 0 auto 14px; }
.legalhead h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.legalsub { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); font-style: italic; }

/* The opening paragraph, given the weight of a card because it is the part
   someone actually reads before deciding whether to read the rest. */
.legalcard {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 20px 22px;
  margin-bottom: 28px;
}
.legallead { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink); }

.legalsection { margin-bottom: 30px; }
.legalsection h2 {
  margin: 0 0 10px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}
.legalsection h3 {
  margin: 20px 0 6px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.legalsection p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Lists carry a lot of the substance on these pages — what is stored, what is
   not done — so they get the same measure and rhythm as the prose rather than
   the tighter spacing lists have elsewhere in the app. */
.legalsection ul {
  margin: 0 0 12px;
  padding-left: 20px;
  list-style: disc;
}
.legalsection li {
  margin-bottom: 8px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.legalsection strong { color: var(--ink); font-weight: 700; }

/* The sentences someone should not be able to skim past. */
.legalemphasis {
  color: var(--ink) !important;
  font-weight: 600;
  border-left: 3px solid var(--accent);
  padding-left: 14px;
}

/* Shown only when the operator has not configured a contact address. It is
   meant to look wrong, because on a live site it is. */
.legalwarn {
  color: var(--neg) !important;
  border: 1px dashed var(--neg);
  border-radius: 12px;
  padding: 12px 14px;
}

.legalsection a, .legalfoot a, .legalcard a { color: var(--accent-ink); }

.legalfoot {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.legalfoot p { margin: 0 0 6px; font-size: 14px; color: var(--ink-faint); }
.legaldate { font-style: italic; }

/* Links to these pages from the sign-in and invite pages. Small, quiet, and
   below the fold of attention — but present, because Google requires them to
   be reachable and because a policy nobody can find is not a policy. */
.legallinks { margin-top: 10px; font-size: 13px; color: var(--ink-faint); }
.legallinks a { color: var(--ink-faint); text-decoration: underline; }
.legallinks a:hover { color: var(--accent-ink); }

@media (max-width: 480px) {
  /* Must repeat the insets: this overrides the rule above, and it applies at
     exactly the width where a notch exists. Dropping them here would undo the
     fix on the only device that needs it. */
  .legalwrap {
    padding: calc(24px + env(safe-area-inset-top, 0px))
             calc(16px + env(safe-area-inset-right, 0px))
             48px
             calc(16px + env(safe-area-inset-left, 0px));
  }
  .legalhead h1 { font-size: 25px; }
  .legalsection h2 { font-size: 18.5px; }
  /* Long addresses and URLs are the one thing here that can force a
     horizontal scrollbar on a narrow screen. */
  .legalsection a { word-break: break-word; }
}