/*
 * The search pages listed in docs/seo.md, and in PUBLIC_PAGES (crawl.ts). Articles someone arrives at
 * from a search, reads, and leaves for the chat from. On guidelines.css's column
 * (.doc, .doc-main, .table-wrap, .store) and styles.css's tokens and components.
 *
 * - One thing to press on every page: "Start a video chat", in the header and at the
 *   end. Blue means press (docs/brand.md); nothing else on the page is blue but links.
 * - Reading comfort first: the 62ch column, 1.7 line height, headings with room above
 *   them, lists spaced like paragraphs.
 */

/* ================================================================== header */

/* The way into the chat, where the guidelines put their way back. */
.appbar .start {
  white-space: nowrap;
}
@media (max-width: 29.99rem) {
  .appbar .start .long {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}

/* ================================================================= article */

/* Where this page sits: Home › This page. Quiet, above the headline. */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  color: var(--text-faint);
  font-size: var(--t-small);
  list-style: none;
}
.crumbs li + li::before {
  content: "›";
  margin-right: var(--sp-2);
  color: var(--text-faint);
}
.crumbs [aria-current="page"] {
  color: var(--text-dim);
}

.doc-head h1 {
  font-size: var(--t-display);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.page-lede {
  margin-top: var(--sp-3);
  color: var(--text-dim);
  font-size: var(--t-lede);
  line-height: 1.55;
}

.prose {
  color: var(--text-dim);
  line-height: 1.7;
}
.prose > h2 {
  margin-top: var(--sp-4);
  color: var(--text);
}
.prose > h3 {
  margin-top: var(--sp-6);
  color: var(--text);
  font-size: var(--t-body);
}
.prose p,
.prose ul,
.prose ol {
  margin: var(--sp-3) 0 0;
}
.prose ul,
.prose ol {
  display: grid;
  gap: var(--sp-2);
  padding-left: 1.375em;
}
.prose strong {
  color: var(--text);
}
.prose .table-wrap {
  margin-top: var(--sp-4);
}
/* The comparison tables: the first column names the row, the rest are answers. */
.prose .store td,
.prose .store th {
  white-space: normal;
}
.prose .store tbody th {
  color: var(--text);
  font-weight: 600;
  white-space: normal;
}
/* A table of short facts wraps in its column instead of scrolling sideways. */
.prose .store.fit {
  min-width: 0;
}
/* .store.stack (one card per row on a phone) is in guidelines.css, shared with
   the Cookie Policy's tables. */
/* A source list under a factual page: small, and every entry a real link. */
.sources {
  color: var(--text-faint);
  font-size: var(--t-small);
  line-height: 1.55;
}
.sources ol {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding-left: 1.375em;
}

/* ===================================================================== CTA */

/* The page's one invitation: a card with a sentence and the button. */
.cta {
  display: grid;
  justify-items: start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.cta h2 {
  font-size: var(--t-heading);
}
.cta p {
  color: var(--text-dim);
}
.cta-note {
  color: var(--text-faint);
  font-size: var(--t-small);
}

/* ======================================================= openers, by mood */

.openers {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: opener;
}
.openers li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  counter-increment: opener;
}
.openers li::before {
  content: counter(opener);
  color: var(--text-faint);
  font: 600 var(--t-small) / 1.7 var(--font-ui);
  font-variant-numeric: tabular-nums;
}

/* =================================================================== the end */

/* Where to read next: the other search pages and the rules. */
.related ul {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}
.related a {
  font-weight: 600;
}
.related p {
  color: var(--text-dim);
  font-size: var(--t-small);
}

@media print {
  .cta,
  .appbar .start {
    display: none;
  }
}