/* ev-legal.css — long-form legal documents (privacy, terms, accessibility).
 *
 * Tokens come from ev-cards.css. These pages are read under duress — someone
 * is looking for one clause, usually on a phone — so the measure is narrow,
 * the headings are scannable, and the tables stay readable rather than pretty.
 */

.ev-legal{
  max-width:760px;
  margin:0 auto;
  padding:28px 0 72px;
  font:400 16.5px/1.65 var(--ev-ui);
  color:var(--ev-ink);
}

.ev-legal > h1{
  font:700 32px/1.15 var(--ev-ui);
  letter-spacing:-.02em;
  margin:0 0 18px;
  color:var(--ev-ink);
}

/* The effective/last-reviewed block sits directly under the h1 as a lone
   paragraph of bold labels; give it the weight of a dateline, not body copy. */
.ev-legal > h1 + p{
  font-size:14px;
  color:var(--ev-ink-2);
  margin:0 0 4px;
}

.ev-legal h2{
  font:700 22px/1.25 var(--ev-ui);
  letter-spacing:-.015em;
  margin:44px 0 12px;
  padding-top:8px;
  color:var(--ev-ink);
  scroll-margin-top:90px; /* clears the sticky header on #s- deep links */
}

.ev-legal h3{
  font:700 17px/1.3 var(--ev-ui);
  margin:28px 0 8px;
  color:var(--ev-ink);
  scroll-margin-top:90px;
}

.ev-legal p{margin:0 0 14px}
.ev-legal strong{color:var(--ev-ink);font-weight:700}

.ev-legal a{color:var(--ev-coral-ink);text-decoration:underline;text-underline-offset:2px}
.ev-legal a:hover{color:var(--ev-coral-deep)}

.ev-legal ul{margin:0 0 16px;padding-left:22px}
.ev-legal li{margin:0 0 8px}

.ev-legal hr{
  border:0;
  border-top:1px solid var(--ev-line);
  margin:36px 0;
}

.ev-legal code{
  background:var(--ev-paper);
  border:1px solid var(--ev-line);
  border-radius:4px;
  padding:1px 5px;
  font-size:.9em;
}

/* Tables carry the substance in this document — the collection categories, the
   retention schedule, the rights list. On a narrow screen they scroll inside
   their own wrapper rather than forcing the page sideways. */
.ev-legal table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 20px;
  font-size:15px;
  background:var(--ev-surface);
}
.ev-legal thead th{
  text-align:left;
  font:600 11px/1.3 var(--ev-ui);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ev-ink-3);
  border-bottom:1px solid var(--ev-line);
  padding:0 12px 8px;
}
.ev-legal tbody td{
  vertical-align:top;
  padding:12px;
  border-bottom:1px solid var(--ev-line);
  color:var(--ev-ink-2);
}
.ev-legal tbody td:first-child{color:var(--ev-ink);width:26%}
.ev-legal tbody tr:last-child td{border-bottom:0}

@media (max-width:700px){
  .ev-legal{font-size:16px;padding:20px 0 56px}
  .ev-legal > h1{font-size:26px}
  .ev-legal h2{font-size:19px;margin-top:34px}
  /* Stack table rows: a 3-column table at 360px is unreadable otherwise. */
  .ev-legal table,
  .ev-legal tbody,
  .ev-legal tbody tr,
  .ev-legal tbody td{display:block;width:auto}
  .ev-legal thead{display:none}
  .ev-legal tbody tr{
    border:1px solid var(--ev-line);
    border-radius:10px;
    padding:6px 4px;
    margin:0 0 12px;
  }
  .ev-legal tbody td{border-bottom:0;padding:6px 12px}
  .ev-legal tbody td:first-child{width:auto;font-weight:600}
}