/* Swoop's site: the front page and the plain pages behind it (privacy, terms, support, data
   sources, the admin form). One stylesheet, the system's own typefaces, and no request to
   anyone but the host: a page that says what the app sends and to whom should not itself
   send every visitor's address to a font service.

   Neutral on purpose. The app's hazard colours mean something on the map (coral is a
   swooper, amber a snake); on a legal page they would mean nothing, so the site keeps to
   ink, paper and one link colour, and follows the system's light and dark setting. */
:root{
  color-scheme:light dark;
  --paper:#FFFFFF;
  --paper-deep:#F2F2F7;        /* the app's light surface */
  --card:#FFFFFF;
  --ink:#1A1A1A;
  --ink-muted:#5C5F62;         /* 5.6:1 on the paper */
  --link:#0062CC;              /* the app's action blue, light text variant */
  --hairline:rgba(26,26,26,.14);
  --shadow:rgba(26,26,26,.10);
  --focus:#0A6FE0;
  --badge:#1A1A1A;
  --badge-ink:#FFFFFF;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --rounded:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#000000;             /* the app's dark surface */
    --paper-deep:#0B0B0D;
    --card:#1C1C1E;
    --ink:#F2F2F2;
    --ink-muted:#A1A1A6;
    --link:#5AA9FF;              /* the app's action blue, dark text variant */
    --hairline:rgba(255,255,255,.16);
    --shadow:rgba(0,0,0,.5);
    --focus:#5AA9FF;
    --badge:#F2F2F2;
    --badge-ink:#000000;
  }
}

*{box-sizing:border-box}
html{min-height:100%; background:var(--paper)}
body{
  margin:0; min-height:100dvh; color:var(--ink); background:var(--paper);
  font-family:var(--sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--link); text-underline-offset:.14em}
:focus-visible{outline:2px solid var(--focus); outline-offset:4px; border-radius:6px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; background:var(--paper-deep); padding:.1em .35em; border-radius:4px}

/* Every page is one measure of text, centred, with the site's name as the way back. */
.page{max-width:66ch; margin:0 auto; padding:7vh 20px 10vh}
.page .back{display:inline-flex; align-items:center; gap:.35em; color:var(--ink-muted); text-decoration:none; font-weight:600; margin-bottom:5vh}
.page .back:hover{color:var(--ink)}
.page .back svg{width:18px; height:18px; stroke:currentColor; stroke-width:2.2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.page h1{font-size:34px; line-height:1.15; margin:0 0 .25em; font-weight:700; letter-spacing:-.015em; text-wrap:balance}
.page .meta{color:var(--ink-muted); font-size:14px; margin:0 0 2.2em}
.page h2{font-size:20px; margin:2em 0 .5em; font-weight:700; letter-spacing:-.01em}
.page h3{font-size:17px; margin:1.6em 0 .4em; font-weight:700}
.page p,.page li{margin:0 0 1em}
.page ul,.page ol{padding-left:1.2em}
.page .lede{font-size:20px; line-height:1.5}
.page hr{border:0; border-top:1px solid var(--hairline); margin:2.5em 0}
.page .foot{font-size:14px; color:var(--ink-muted)}
.page table{border-collapse:collapse; width:100%; font-size:15px; margin:0 0 1.2em}
.page th,.page td{text-align:left; vertical-align:top; padding:.5em .6em; border-bottom:1px solid var(--hairline)}
.page th{font-weight:700}
.page .notice{background:var(--card); border:1px solid var(--hairline); border-radius:14px; padding:1em 1.2em; margin:1.2em 0}

/* ---------- the front page ---------- */
.home{max-width:66ch; margin:0 auto; padding:9vh 20px 6vh}
.home h1{font-size:44px; line-height:1.05; margin:0 0 .35em; font-weight:800; letter-spacing:-.02em; text-wrap:balance; font-family:var(--rounded)}
.home .tag{font-size:22px; line-height:1.45; color:var(--ink-muted); margin:0 0 1.6em; text-wrap:balance}
.home .where{display:inline-block; font-size:14px; font-weight:600; color:var(--ink-muted); border:1px solid var(--hairline); border-radius:999px; padding:.3em .9em; margin-bottom:2.2em}
.features{list-style:none; padding:0; margin:0 0 2.4em; display:grid; gap:14px}
.features li{background:var(--card); border:1px solid var(--hairline); border-radius:18px; padding:1em 1.2em; box-shadow:0 6px 18px var(--shadow)}
.features h2{font-size:17px; margin:0 0 .25em; font-weight:700}
.features p{margin:0; color:var(--ink-muted); font-size:15.5px; line-height:1.5}

/* The App Store pill. A span until the app is on sale and a link after, so the rule is
   written for both: no underline, which a link gets by default. fastlane/lib/store_badge.rb
   reads this markup to say when to make the swap. */
.store{
  display:inline-flex; align-items:center; gap:.5em;
  text-decoration:none; background:var(--badge); color:var(--badge-ink);
  border-radius:999px; padding:.55em 1.1em .55em .9em;
  font-size:16px; font-weight:700; letter-spacing:.005em; white-space:nowrap;
}
.store svg{width:1.15em; height:1.15em; fill:currentColor}
.store small{font-weight:600; opacity:.7; font-size:.85em}
.honest{margin:2.2em 0 0; font-size:15px; color:var(--ink-muted); line-height:1.5}

footer{
  width:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.35em 1.1em;
  padding:2vh 20px 22px; font-size:13px; color:var(--ink-muted);
}
footer a{color:inherit; text-decoration:underline; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:.15em}
footer a:hover{color:var(--ink); text-decoration-color:currentColor}
footer .sep{opacity:.5}

/* ---------- the admin form ---------- */
.form{display:grid; gap:14px; margin:1.5em 0}
.form label{display:grid; gap:.3em; font-weight:600; font-size:15px}
.form input,.form select,.form textarea{
  font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--hairline);
  border-radius:10px; padding:.55em .7em; width:100%;
}
.form textarea{min-height:5em; resize:vertical}
.form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form button{
  font:inherit; font-weight:700; color:var(--badge-ink); background:var(--badge); border:0;
  border-radius:999px; padding:.65em 1.3em; cursor:pointer; justify-self:start;
}
.form button:disabled{opacity:.5; cursor:default}
.form .status{font-size:15px; color:var(--ink-muted); min-height:1.4em}
pre.payload{background:var(--paper-deep); border-radius:10px; padding:.8em 1em; overflow-x:auto; font-size:13px}

@media (prefers-reduced-motion:reduce){ *{transition:none !important} }
@media (max-width:420px){ .home h1{font-size:36px} .form .row{grid-template-columns:1fr} }