/* Page-specific rules for the OSS Scanner page. Everything else comes
 * from assets/site.css, which is the CVD site's stylesheet copied
 * unchanged. Rules here are only for elements the CVD pages do not use
 * (block quotes, inline code, plain prose lists). */

/* FAQ questions are h3s; site.css only colours h3, so size them here
 * between the page's h2 (28px) and body text. */
h3 {
  font-size: 20px;
  font-weight: 600;
  margin: 48px 0 12px;
}

/* Prose width matches the CVD About page (.about-section p). */
main > p,
main > ul,
main > blockquote {
  max-width: 640px;
}
main > ul {
  box-sizing: border-box;
  padding-left: 24px;
}
main > ul li {
  margin: 4px 0;
}
/* Numbered items in the terms text. The number is part of the text, exactly as typed, so the list
 * has no markers of its own; wrapped lines hang under the text, not under the number. */
main > ul.numbered {
  list-style: none;
  padding-left: 0;
}
main > ul.numbered li {
  padding-left: 28px;
  text-indent: -28px;
}

/* Quoted text (the OSS-Fuzz criteria, the sample commit line). */
blockquote {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--stroke-strong);
}
blockquote p {
  margin: 0;
}

/* Inline code, in the mono stack the CVD site uses for identifiers. */
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px;
  background: var(--surface-note);
  border-bottom: 1px solid var(--divider);
  padding: 1px 5px;
}

/* Table of contents. On wide screens (1024px and up, where site.css
 * gives the body grid an 80px gutter plus a flexible margin on each
 * side) it sits to the left of the text column, spanning the whole page
 * height so its inner list can stick while the reader scrolls. Below
 * that width there is no room beside the text, so it renders inline,
 * under the banner, as a plain "Contents" list. */
.toc {
  font-size: 13px;
  line-height: 1.45;
  margin: 0 0 24px;
  max-width: 640px;
}
.toc-label {
  display: block;
  color: var(--fg-muted);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li {
  margin: 0;
}
.toc a {
  display: block;
  color: var(--fg-muted);
  text-decoration: none;
  padding: 4px 0 4px 10px;
  border-left: 2px solid var(--hairline);
}
.toc a:hover {
  color: var(--fg-bright);
}
.toc a.is-current {
  color: var(--fg-bright);
  border-left-color: var(--stroke-strong);
}
/* Second-level entries (h3s), if the copy has any. */
.toc li li a {
  padding-left: 22px;
  font-size: 12px;
}
@media (min-width: 1024px) {
  main > .toc {
    grid-column: screen-start / text-start;
    grid-row: 1 / span 400;
    justify-self: end;
    align-self: stretch;
    width: 100%;
    max-width: 220px;
    padding-right: 32px;
    box-sizing: border-box;
    margin: 0;
  }
  .toc-inner {
    position: sticky;
    top: 40px;
    /* Start level with the page heading, which sits at the grid's top. */
    padding-top: 12px;
  }
}
/* Anchor jumps leave a little room above the heading. */
h2[id],
h3[id] {
  scroll-margin-top: 24px;
}

/* Long URLs and paths wrap instead of overflowing on narrow screens. */
main a,
main code,
main p,
main li {
  overflow-wrap: anywhere;
}

/* Terms & Conditions text (the terms/ page). The text is made from the terms
 * document by code. Clause numbers ("1.", "(a)", "(iii)") are part of the
 * text, exactly as the document shows them, so nothing here counts and no
 * list markers are drawn. Every rule is scoped to .terms-text, which only
 * the terms page has, so the front page is not affected. */
.terms-text {
  max-width: 640px;
  --terms-step: 32px;
}
.terms-text p,
.terms-text h2,
.terms-text h3,
.terms-text h4 {
  overflow-wrap: anywhere;
}
.terms-text p {
  margin: 12px 0;
}
/* Section titles inside the terms text are smaller than the front page's. */
.terms-text h2 {
  font-size: 22px;
  margin: 48px 0 12px;
  padding-bottom: 8px;
}
.terms-text h3 {
  font-size: 18px;
  margin: 32px 0 8px;
}
.terms-text h4 {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg-bright);
  margin: 24px 0 8px;
}
/* Indentation follows the document: cN sets the text N steps in. */
.terms-text .c1 { padding-left: calc(1 * var(--terms-step)); }
.terms-text .c2 { padding-left: calc(2 * var(--terms-step)); }
.terms-text .c3 { padding-left: calc(3 * var(--terms-step)); }
.terms-text .c4 { padding-left: calc(4 * var(--terms-step)); }
.terms-text .c5 { padding-left: calc(5 * var(--terms-step)); }
.terms-text .c6 { padding-left: calc(6 * var(--terms-step)); }
.terms-text .c7 { padding-left: calc(7 * var(--terms-step)); }
.terms-text .c8 { padding-left: calc(8 * var(--terms-step)); }
/* A numbered clause: its number hangs in the step before the text, and
 * wrapped lines line up under the text, not under the number. A number
 * wider than one step pushes only its own first line to the right. */
.terms-text .tcl {
  text-indent: calc(-1 * var(--terms-step));
}
.terms-text .tcl.c0 {
  padding-left: var(--terms-step);
}
.terms-text .tcl > .tn {
  display: inline-block;
  box-sizing: border-box;
  min-width: calc(var(--terms-step) - 0.27em);
  text-indent: 0;
}
.terms-text .tc {
  text-align: center;
}
.terms-text .tr {
  text-align: right;
}
/* Headings in the terms text are left-aligned, like the front page's
 * headings, even where the terms document centres them. */
.terms-text h2.tc,
.terms-text h3.tc,
.terms-text h4.tc {
  text-align: left;
}
/* The document's own title and subtitle lines, when it has them. */
.terms-text .tt {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-bright);
}
.terms-text .tst {
  color: var(--fg-muted);
}
@media (max-width: 560px) {
  .terms-text {
    --terms-step: 22px;
  }
}