/*
 * The pages that are read: privacy, terms, support, and the page a quest or
 * an invitation opens on. One column, a measure a line can be read across,
 * rules between the parts. The tokens and the shared parts are base.css.
 *
 * What these pages say is theirs. This is only how it is set.
 */

main.legal {
  --measure: 42rem;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) clamp(2rem, 6vh, 4rem);
}

.legal h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.92;
}

.legal .updated {
  margin-top: 1rem;
  font: 0.8125rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink2);
}

.lead {
  margin-top: 1.5rem;
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.8vw, 1.375rem);
  line-height: 1.4;
}

.legal .lead {
  color: var(--ink);
}

/* A part begins under a rule, the way a section of the app does. */
.legal h2 {
  margin: 3.5rem 0 1rem;
  padding-top: 1.25rem;
  border-top: var(--rule) solid var(--ink);
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1;
}

.legal h3 {
  margin: 2rem 0 0.5rem;
  font-size: 1.1875rem;
  line-height: 1.3;
}

.legal p,
.legal li {
  max-width: var(--measure);
  color: var(--ink2);
}

.legal p + p {
  margin-top: 1rem;
}

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

.legal li + li {
  margin-top: 0.5rem;
}

.legal a {
  color: var(--ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.legal a:hover {
  text-decoration-color: var(--lava);
}

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

/* Set apart by a frame and not a fill: one framed thing to a page. */
.legal .callout {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border: var(--rule) solid var(--ink);
  background: var(--paper2);
}

.legal .callout p {
  color: var(--ink);
}

.legal .faq > div + div {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hair);
}

.legal .faq h3 {
  margin-top: 0;
}

.legal .table-scroll {
  margin: 1.5rem 0;
  overflow-x: auto;
}

.legal table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.legal th,
.legal td {
  padding: 0.75rem 1rem 0.75rem 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink2);
  text-align: left;
  vertical-align: top;
}

.legal th {
  color: var(--ink);
  font-weight: 600;
}

.legal code {
  color: var(--ink);
  font-family: var(--mono);
  /* A URL or a command breaks rather than pushing the page wide. */
  overflow-wrap: anywhere;
}

/* A long word in display type breaks rather than running off a phone. */
.legal h1 {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* On a phone the table is a list: each name, then why, then what they get,
   each labelled. Scrolled sideways, the column the page exists for was cut
   mid-word with nothing saying there was more (AHO-636). */
@media (max-width: 44rem) {
  .legal .table-scroll {
    overflow: visible;
  }

  .legal table,
  .legal tbody,
  .legal tr,
  .legal td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .legal thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .legal tr {
    padding: 1rem 0;
    border-top: 1px solid var(--hair);
  }

  .legal td {
    padding: 0;
    border: 0;
  }

  .legal td:first-child {
    color: var(--ink);
    font: 800 1.25rem/1.15 var(--display);
    letter-spacing: -0.02em;
  }

  .legal td + td {
    margin-top: 0.75rem;
  }

  .legal td:nth-child(2)::before,
  .legal td:nth-child(3)::before {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--ink2);
    font: 0.75rem/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

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

  .legal td:nth-child(3)::before {
    content: "What they get";
  }
}

.small {
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ---------- Support ---------- */

/* The chat and the address are one offer, so they sit on one row. */
.support-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.25rem;
  margin: 2rem 0;
}

.legal .support-actions span {
  color: var(--ink2);
  font-size: 1rem;
}

/* The one thing to press on the page, so it is the button. `.legal a`
   colours a link at higher specificity than a bare class, which is why
   this is scoped. */
.legal a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: var(--rule) solid #17171a;
  border-radius: 6px;
  font: 700 1.125rem/1.15 var(--sans);
  text-align: center;
  text-decoration: none;
  /* Wraps rather than outgrowing a 320 column (AHO-636). */
  max-width: 100%;
  padding-block: 0.6rem;
  text-wrap: balance;
}

/* The outline button, which `.legal a` would otherwise colour. */
.legal a.button.ghost {
  border-color: var(--ink);
  background: none;
  color: var(--ink);
}

@media (hover: hover) {
  .legal a.button.ghost:hover {
    background: var(--paper2);
  }
}

.legal .support-actions .chat-cta,
.legal a.button:not(.ghost) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.5rem;
  padding: 0 1.75rem;
  border: var(--rule) solid #17171a;
  border-radius: 6px;
  background: var(--lava);
  color: #17171a;
  font: 700 1.125rem/1.15 var(--sans);
  text-align: center;
  text-decoration: none;
  max-width: 100%;
  padding-block: 0.6rem;
  text-wrap: balance;
}

@media (hover: hover) {
  .legal .support-actions .chat-cta:hover,
  .legal a.button:not(.ghost):hover {
    background: var(--lava-up);
  }
}

.legal .support-actions .chat-cta:active,
.legal a.button:not(.ghost):active {
  background: var(--lava-up);
  transform: translateY(1px);
}