/*
 * The legal pages' stylesheet — ONE file, linked by all of them.
 *
 * These pages are deliberately not part of the application: plain HTML, no
 * bundle, no Convex client, no script of any kind. `/terms` used to resolve to
 * `index.html`, so the sign-up checkbox linked to the app — which says "We
 * can't reach OnAir" whenever the backend is down, and needs JavaScript to say
 * anything at all. A policy that is unreadable exactly when somebody goes
 * looking for it is not published, and a claimant's lawyer has to be able to
 * load it with script off.
 *
 * The style was inlined in each page while there were three. At nine it is one
 * file, because nine copies of a colour drift on the first edit.
 */
:root {
  color-scheme: light dark;
  --ink: #101114;
  --dim: #5b6070;
  --line: #e3e5ea;
  --bg: #fbfbfc;
  --card: #fff;
  --acc: #7c5cff;
  --warn-bg: rgba(255, 196, 0, .16);
  --warn-line: rgba(255, 170, 0, .5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e9eaee;
    --dim: #9aa0b0;
    --line: #2a2d36;
    --bg: #0d0e12;
    --card: #14161c;
  }
}
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.62 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 0 20px;
  /* A long address, a URL or a statute reference in running text has nowhere
     to break on a narrow screen unless it is allowed one. Without this /dmca
     pushed 8px wide at 390px — a horizontal scrollbar on the one document
     somebody reads on a phone mid-argument. */
  overflow-wrap: anywhere;
}
main { max-width: 760px; margin: 0 auto; padding: 44px 0 96px }
a { color: var(--acc) }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 6px }
h2 {
  font-size: 1.14rem; margin: 36px 0 8px;
  padding-top: 15px; border-top: 1px solid var(--line);
}
h3 { font-size: 1rem; margin: 22px 0 6px }
.sub { color: var(--dim); margin: 0 0 4px }
.muted { color: var(--dim) }

/* Every page carries the same row, so somebody who lands on one can reach the
   others. Nine pages with no way between them is nine dead ends. */
.nav {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 16px 0 0; margin-bottom: 4px; font-size: .92rem;
}
.nav a[aria-current] { color: var(--ink); font-weight: 700; text-decoration: none }

ul, ol { padding-left: 22px }
li { margin: 5px 0 }

table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: .94rem }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { color: var(--dim); font-weight: 600 }

code {
  background: rgba(124, 92, 255, .12); padding: 1px 5px;
  border-radius: 4px; font-size: .9em;
}
.box {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); padding: 14px 16px; margin: 16px 0;
}
.box p:first-child { margin-top: 0 }
.box p:last-child { margin-bottom: 0 }

/* An operator fact nobody can invent. `check_reports.py` is red while any of
   these remain, and the highlight is so that a half-finished document cannot
   be mistaken for a finished one at a glance. */
.fill {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 5px; padding: 1px 6px; font-weight: 600;
}

/* The index's list of documents. */
.docs { list-style: none; padding: 0; margin: 18px 0 0 }
.docs li { margin: 0 0 10px }
.docs a { font-weight: 700; text-decoration: none; font-size: 1.03rem }
.docs a:hover { text-decoration: underline }
.docs p { margin: 2px 0 0; color: var(--dim); font-size: .94rem }

footer {
  margin-top: 46px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--dim); font-size: .9rem;
}
footer a { color: var(--dim) }