/* Shared by the comparison, switch and method pages (/compare and everything it
   lists). home.css carries the site frame; this carries the few patterns those
   pages repeat: a lead paragraph, numbered steps, a side-by-side fact table,
   the honest-limits list and the related-pages list at the foot.

   The two original switch pages keep their own inline copies of some of this.
   They predate the file and are held to their wording by tests, so they were
   left alone rather than restyled for tidiness. */

.doc h1 { margin-bottom: 0.25rem; }
.doc .lead { margin-top: 0; font-size: 1.15rem; }
.doc h2 { margin-top: 0; }
.doc p, .doc li, .doc dd { max-width: 68ch; }

.steps { margin: 1.25rem 0 0; padding-left: 1.35rem; }
.steps li { margin-bottom: 0.9rem; }
.steps li strong { display: block; }
.steps li span { color: var(--on-surface-variant); }

.plain-list { margin: 1rem 0 0; padding-left: 1.15rem; }
.plain-list li { margin-bottom: 0.5rem; color: var(--on-surface-variant); }

/* A two- or three-column comparison. Rows are facts, columns are apps. On a
   phone a multi-column table is unreadable, so each row stacks and every cell
   carries its column's name through data-label. */
.facts { width: 100%; border-collapse: collapse; margin-top: 1.25rem; }
.facts th, .facts td {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}
.facts thead th {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.facts tbody th { font-weight: 700; width: 28%; }
.facts td { color: var(--on-surface-variant); }

@media (max-width: 640px) {
  .facts thead { display: none; }
  .facts, .facts tbody, .facts tr, .facts th, .facts td {
    display: block;
    width: auto;
  }
  .facts tr { padding: 0.6rem 0; border-bottom: 1px solid var(--outline-variant); }
  .facts th, .facts td { border: 0; padding: 0.15rem 0; }
  .facts td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--on-surface);
  }
}

.limits { margin-top: 1.25rem; }
.limits dt { font-weight: 700; margin-top: 1rem; }
.limits dd { margin: 0.3rem 0 0; color: var(--on-surface-variant); }

.related { list-style: none; margin: 1rem 0 0; padding: 0; }
.related li { margin-bottom: 0.6rem; }
.related a { font-weight: 600; }
.related span { display: block; color: var(--on-surface-variant); }

.sources { font-size: 0.85rem; color: var(--on-surface-variant); margin-top: 1.25rem; }