/* LintTrust, the site's one stylesheet. The tone of the working paper
   itself: a serif for headings, a sans for text, a monospace for what a
   certificate says, a narrow measure, black on white. Two colours besides
   them, the product's verdict green and red, only where a verdict is
   shown, and blue for links. Light only. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/SourceSerif4Variable-Roman.otf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3VF-Upright.otf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/SourceSans3VF-Italic.otf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* The Chinese, Japanese, Korean, and Arabic faces, each cut to the
   characters of its language's strings (tools/subset_fonts.py). */
@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/NotoSansSC-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans SC";
  src: url("/fonts/NotoSansSC-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/NotoSansTC-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans TC";
  src: url("/fonts/NotoSansTC-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url("/fonts/NotoSansJP-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/NotoSansKR-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans KR";
  src: url("/fonts/NotoSansKR-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/NotoSansArabic-Regular.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans Arabic";
  src: url("/fonts/NotoSansArabic-Bold.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111;
  --muted: #4a4a4a;
  --rule: #d4d4d4;
  --paper: #fff;
  --tint: #f5f5f3;
  --link: #1a4fd8;
  --pass: #1b5e20;
  --fail: #b00020;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --measure: 70ch;
  --wide: 72rem;
}

/* The font stack of each language: one line per language. The Latin
   languages (French, Spanish, Portuguese, German) share the default stacks.
   The others take their Noto face first (cut to the site's characters,
   its own Latin kept, so a Chinese quotation mark keeps its width), the
   site's Latin sans after it (Arabic's Noto face has no Latin), then the
   system's, and set their headings in the same sans: none of them has a
   serif here. */
:lang(ar) { --serif: "Noto Sans Arabic", "Source Sans 3", Tahoma, sans-serif; --sans: "Noto Sans Arabic", "Source Sans 3", Tahoma, sans-serif; }
:lang(zh-Hans) { --serif: "Noto Sans SC", "Source Sans 3", "Microsoft YaHei", "PingFang SC", sans-serif; --sans: "Noto Sans SC", "Source Sans 3", "Microsoft YaHei", "PingFang SC", sans-serif; }
:lang(zh-Hant) { --serif: "Noto Sans TC", "Source Sans 3", "Microsoft JhengHei", "PingFang TC", sans-serif; --sans: "Noto Sans TC", "Source Sans 3", "Microsoft JhengHei", "PingFang TC", sans-serif; }
:lang(ja) { --serif: "Noto Sans JP", "Source Sans 3", "Yu Gothic", "Hiragino Sans", sans-serif; --sans: "Noto Sans JP", "Source Sans 3", "Yu Gothic", "Hiragino Sans", sans-serif; }
:lang(ko) { --serif: "Noto Sans KR", "Source Sans 3", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; --sans: "Noto Sans KR", "Source Sans 3", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
:lang(ko) body, body:lang(ko) { word-break: keep-all; }
:lang(ar) body, body:lang(ar) { line-height: 1.75; }
/* Latin names and numbers inside a right-to-left sentence read left to
   right, as written (the build wraps them in <bdi dir="ltr">). */
bdi { unicode-bidi: isolate; }

*, *::before, *::after { box-sizing: border-box; }
/* Hidden means hidden, whatever display a class gives (the video button
   while the video has no ID, the form's notices). */
[hidden] { display: none !important; }

html { background: var(--paper); color: var(--ink); scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.9rem; padding-top: 0.2em; border-top: 2px solid var(--ink); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
strong { font-weight: 650; }
code { font-family: var(--mono); font-size: 0.88em; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 2px;
}

/* One column, one left edge: the headings, the screenshots, and the
   columns span it, the running text keeps its measure. */
.measure, .wide { max-width: var(--wide); margin: 0 auto; padding: 0 1.25rem; }
.measure > p, .measure > ul, .measure > form, .measure > .cards, .measure > .video { max-width: var(--measure); }

/* The skip link, clipped out of sight until it has the focus (an offset
   would reach past the page's edge in a right-to-left page). */
.skip { position: absolute; top: 0; inset-inline-start: 1rem; z-index: 10; background: var(--paper); padding: 0.5rem 1rem; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.masthead { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 5; }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; max-width: var(--wide); }
.brand { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--ink); text-decoration: none; }
/* The wordmark, "LintTrust" in the serif as paths (tools/make_marks.py):
   its ink is 0.744 em of the font size, so it stands at the size of the
   name it replaces. */
.wordmark { display: inline-block; height: calc(1.25rem * 0.744); width: auto; vertical-align: baseline; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; font-size: 1rem; }
/* The language switch: a dropdown, small, at the end of the header (the
   right, the left in a right-to-left page, whose header mirrors), a globe
   and the current language's name, and a chevron drawn in CSS. No flag: a
   flag names a country, and the site's languages cross them. Its list
   opens under it from its end side, so it never leaves the page. */
.languages { font-size: 0.85rem; font-family: var(--sans); margin-inline-start: auto; align-self: center; }
.globe { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.1; flex: none; }
.language-menu { position: relative; }
.language-menu summary {
  display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; list-style: none;
  padding: 0.2rem 0.55rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink);
}
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary:hover { background: var(--tint); }
.language-menu summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.chevron { width: 0; height: 0; border-inline-start: 0.3em solid transparent; border-inline-end: 0.3em solid transparent;
  border-top: 0.38em solid currentColor; }
.language-menu[open] .chevron { border-top: 0; border-bottom: 0.38em solid currentColor; }
.language-menu ul {
  position: absolute; top: calc(100% + 4px); inset-inline-end: 0; z-index: 20; min-width: 100%;
  margin: 0; padding: 0.3rem 0; list-style: none; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.language-menu li a { display: block; padding: 0.3rem 0.8rem; white-space: nowrap; }
.language-menu li a:hover, .language-menu li a:focus-visible { background: var(--tint); }
.language-menu a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }

/* The language banner: one line under the header, in the language it
   offers, a link and a close control, shown by site.js only. */
.language-banner { border-bottom: 1px solid var(--rule); background: var(--tint); font-family: var(--sans); font-size: 0.95rem; }
.language-banner-inner { display: flex; align-items: center; gap: 1rem; padding-top: 0.45rem; padding-bottom: 0.45rem; max-width: var(--wide); }
.language-banner p { margin: 0; flex: 1; max-width: none; }
.banner-close { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; padding: 0;
  border: 1px solid transparent; border-radius: 3px; background: none; color: var(--ink); cursor: pointer; }
.banner-close:hover { background: var(--paper); border-color: var(--rule); }
.banner-close:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.banner-close svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

main section { padding: 3.5rem 0 1.5rem; }
.hero { padding-top: 3rem; }
.hero h1 { margin-bottom: 0.3em; }
.lede { font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 2rem; }
.button {
  display: inline-block;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.button.primary { background: var(--ink); color: var(--paper); }
.button:hover { background: var(--tint); }
.button.primary:hover { background: #333; }

/* The screenshots, reserved at 16:10 until they exist. */
.shot { margin: 0; border: 1px solid var(--rule); aspect-ratio: 16 / 10; background: var(--tint); overflow: hidden; }
.shot img, .shot svg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.shot-label { font-family: var(--sans); font-size: 40px; fill: var(--muted); }
.shot-frame { fill: none; stroke: var(--rule); stroke-width: 4; }

.video { margin: 0 0 2rem; aspect-ratio: 16 / 9; }
.video iframe { width: 100%; height: 100%; border: 0; }

.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.column h3 { font-size: 1.15rem; }

.arguments { padding-inline-start: 1.25rem; margin: 0 0 1.5rem; }
.arguments li { margin-bottom: 0.75rem; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.card { border: 1px solid var(--rule); padding: 1.25rem 1.25rem 0.5rem; }

/* The questions: one <details> each, closed, the question its summary. */
.faq { border-top: 1px solid var(--rule); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary { cursor: pointer; padding: 0.85rem 0; font-weight: 600; list-style: none; display: flex; gap: 0.6rem; align-items: baseline; }
.faq-item summary::-webkit-details-marker { display: none; }
/* A triangle drawn in CSS, pointing to the text's end when closed and down
   when open (no character a screen reader would read). */
.faq-item summary::before { content: ""; flex: none; width: 0; height: 0; align-self: center;
  border-block: 0.3em solid transparent; border-inline-start: 0.42em solid var(--muted); }
.faq-item[open] summary::before { border-inline: 0.3em solid transparent; border-block-start: 0.42em solid var(--muted); border-block-end: 0; }
.faq-item summary:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.faq-item p { margin: 0 0 1rem; padding-inline-start: 1.05rem; }

/* The verdicts, the only colour besides the links. */
.verdict-pass { color: var(--pass); }
.verdict-fail { color: var(--fail); }

.demo { margin-top: 1.5rem; }
.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
}
.field textarea { resize: vertical; }
/* Out of sight without moving off the page (an offset would scroll a
   right-to-left page sideways). */
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.privacy { font-size: 0.95rem; color: var(--muted); }
.notice { border-inline-start: 4px solid var(--ink); padding: 0.75rem 1rem; background: var(--tint); }

.footer { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 2rem 0 3rem; font-size: 0.95rem; color: var(--muted); }
.reference { font-style: italic; }
:lang(zh-Hans) .reference, :lang(zh-Hant) .reference, :lang(ja) .reference, :lang(ko) .reference, :lang(ar) .reference { font-style: normal; }

@media (max-width: 760px) {
  body { font-size: 1.0625rem; }
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.55rem; }
  .lede { font-size: 1.25rem; }
  .columns, .cards { grid-template-columns: 1fr; gap: 1rem; }
  /* The language switch on the wordmark's row, at its end, the anchor menu
     on the rows below: the header stays two rows high. */
  .brand { order: 1; }
  .languages { order: 2; }
  .masthead-inner > nav:not(.languages) { order: 3; flex-basis: 100%; }
  /* On a narrow screen the screenshot keeps its left edge, where the
     criterion row is, rather than shrinking the whole page to nothing. */
  .shot { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}