/* The website's text pages (licence, third-party software): the main page's colours and type */
:root { --bg: #fbfaf7; --fg: #1f2328; --muted: #5b616b; --accent: #b4442f; --line: #e3e0d8;
        --panel: #f2f0ea; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #16181c; --fg: #e8e6e1; --muted: #a3a8b0; --accent: #e07a62; --line: #2c3036;
          --panel: #1e2126; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
       font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
header, main, footer { max-width: 780px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
header a { display: inline-flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none;
           font-weight: 600; }
main { padding-top: 24px; padding-bottom: 40px; }
footer { padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--line); color: var(--muted);
         font-size: .9rem; }
a { color: var(--accent); }
h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 8px; text-wrap: balance; }
h2 { font-size: 1.25rem; margin: 32px 0 10px; scroll-margin-top: 16px; }
p, li { text-wrap: pretty; }
p { margin: 0 0 12px; }
.meta { color: var(--muted); font-size: .9rem; margin-bottom: 24px; }
code { font-size: .9em; background: var(--panel); padding: 1px 5px; border-radius: 4px; }
/* licence clauses: the number hanging in the margin */
.clause, .sub, .cont { padding-left: 3.2em; }
.clause { text-indent: -3.2em; scroll-margin-top: 16px; }
.sub { padding-left: 5em; text-indent: -1.8em; margin-bottom: 6px; }
.clause .num { display: inline-block; width: 3.2em; text-indent: 0; font-weight: 600; }
.sub .num { display: inline-block; width: 1.8em; text-indent: 0; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; }
@media (max-width: 560px) {
  .clause, .cont { padding-left: 0; text-indent: 0; }
  .clause .num { width: auto; margin-right: .4em; }
  .sub { padding-left: 1.6em; }
}
ul.inner { margin: 0 0 12px; padding-left: 5em; }
@media (max-width: 560px) { ul.inner { padding-left: 1.6em; } }
.scroll { overflow-x: auto; }                 /* a wide table scrolls by itself on phones */