/* Terminal's website: tokens, type, motion, header and footer, shared by every
   page. The home page's demos add home.css; the text pages add nothing.

   COLOUR MEANS WHAT IT MEANS IN THE APP. Green is live or on time, amber is
   late or at risk, red is cancelled. Everything else is a grey off #e2e2e2 on
   solid black, with hairlines and no glass, glow or gradient.

   TWO TYPEFACES, SELF-HOSTED. Inter for words, JetBrains Mono for codes and
   data, both from their own files so no visitor's address is sent to a font
   service. Each has a small second file for the arrow and the delay marks,
   which the latin files leave out. Licences: fonts/OFL-*.txt. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-symbols.woff2) format('woff2');unicode-range:U+2192,U+25B4,U+25BE}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-symbols.woff2) format('woff2');unicode-range:U+2192,U+25B4,U+25BE}

:root{
  --bg:#050505;
  --ink:#e2e2e2;
  --ink-lead:rgb(226 226 226/.8);
  --ink2:rgb(226 226 226/.72);
  --ink3:rgb(226 226 226/.52);
  --line:rgb(255 255 255/.08);
  --line2:rgb(255 255 255/.14);
  --tint:rgb(255 255 255/.06);
  --green:#4ade80;
  --amber:#fbbf24;
  --red:#f87171;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --pad:16px;
  --maxw:1120px;
  --head:68px;
  /* ── MOTION: TWO CURVES FOR THE WHOLE SITE ──
     --spring for anything that moves: a notification dropping in, a sheet
     rising, the step indicator sliding. It is iOS's default spring (response
     0.5 s, damping 0.82), about 1% past the mark and settled by 650 ms,
     sampled as a linear() curve where the browser takes one and a close
     cubic-bezier where it does not.
     --ease for anything that only changes: colour, opacity, a crossfade. */
  --spring:cubic-bezier(.32,.72,0,1);
  --t-spring:650ms;
  --ease:cubic-bezier(.44,0,.56,1);
  --t:220ms;
  color-scheme:dark;
}
@supports (transition-timing-function:linear(0,1)){
  :root{--spring:linear(0 0%, 0.011 1.9%, 0.04 3.8%, 0.098 6.2%, 0.192 9.4%, 0.484 18.1%, 0.614 22.5%, 0.709 26.2%, 0.788 30%, 0.86 34.4%, 0.914 38.8%, 0.956 43.8%, 0.988 50%, 1.007 58.1%, 1.01 71.9%, 1 100%)}
}
@media(min-width:640px){:root{--pad:32px}}
@media(min-width:1024px){:root{--pad:48px}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 12px)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button,input,label{-webkit-tap-highlight-color:transparent}
img,svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
.mono{font-family:var(--mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.skip{position:absolute;left:var(--pad);top:-60px;background:var(--green);color:#04160b;padding:8px 12px;border-radius:6px;font-weight:600;text-decoration:none;z-index:60}
.skip:focus{top:12px}

/* ── TYPE ── One scale for the site. Headings balance their lines so none
   ends on a lone word; paragraphs avoid a single word on their last line. */
.t-h1{font-size:clamp(2.5rem,4.45vw,4rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.t-h2{font-size:clamp(2rem,3.35vw,3rem);font-weight:700;letter-spacing:-.03em;line-height:1.06;max-width:24ch;text-wrap:balance}
.t-lead{font-size:clamp(1.125rem,1.4vw,1.25rem);font-weight:500;color:var(--ink-lead);line-height:1.5;max-width:34em;text-wrap:pretty}
.t-lead a{color:var(--green);text-decoration:none;border-bottom:1px solid rgb(74 222 128/.35);transition:border-color var(--t) var(--ease)}
.t-lead a:hover{border-bottom-color:var(--green)}
.t-lead a:active{opacity:.6}

/* ── HEADER ── Solid and sticky, so the site's links and the App Store line
   are always a tap away. The hairline under it appears once the page moves
   (site.js), so at the top it sits on the page instead of across it. */
.top{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease)}
.top.edge{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head)}
.brand{display:inline-flex;align-items:center;gap:11px;min-height:44px;font-weight:600;font-size:1.125rem;letter-spacing:-.015em;text-decoration:none}
.brand img{width:28px;height:28px;flex-shrink:0}
.brand:active{opacity:.6}
.top nav{display:flex;align-items:center;gap:24px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;font-weight:500;color:var(--ink2);text-decoration:none;transition:color var(--t) var(--ease)}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top nav a:active{opacity:.6}
@media(max-width:559px){.top .soon{display:none}}

/* ── THE APP STORE LINE ── Until launch it is a label and nothing more: no
   border, no fill, nothing that invites a press, because pressing it does
   nothing. At launch it becomes Apple's badge in the same three places. */
.soon{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:500;color:var(--ink2);white-space:nowrap}
.soon::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0}

/* ── FOOTER ── Two rows: what Terminal is and where to go, then the small
   print. Every link is a 44px-tall target. */
.foot{border-top:1px solid var(--line)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:20px 48px;padding-top:64px;padding-bottom:20px}
.foot-brand p{margin-top:6px;font-size:.95rem;color:var(--ink2)}
.foot-links{display:flex;flex-wrap:wrap;column-gap:28px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.95rem;color:var(--ink2);text-decoration:none;transition:color var(--t) var(--ease)}
.foot-links a:hover,.foot-links a[aria-current]{color:var(--ink)}
.foot-links a:active{opacity:.6}
.foot-bottom{padding-top:12px;padding-bottom:44px;font-size:.8125rem;color:var(--ink3)}
/* Who makes it, under the small print in the same type. Its email is a link
   like the footer's others: no underline, a 44px-tall target that adds no
   height to its line. */
.foot-bottom a{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;text-decoration:none;transition:color var(--t) var(--ease)}
.foot-bottom a:hover{color:var(--ink)}
.foot-bottom a:active{opacity:.6}
@media(prefers-reduced-motion:reduce){.foot-bottom a{transition:none}}

/* ── TEXT PAGES: support, privacy, terms, 404 ── One column about sixty
   characters wide. Green is kept for links, the one thing to act on. */
.doc{max-width:720px;padding-top:56px;padding-bottom:96px}
.doc .eyebrow{font-family:var(--mono);font-size:.8125rem;color:var(--ink2);margin-bottom:16px}
.doc h1{font-size:clamp(2.25rem,5vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;margin-bottom:14px;text-wrap:balance}
.doc .meta{font-family:var(--mono);font-size:.8125rem;color:var(--ink3);margin-bottom:32px}
.doc .lede{font-size:1.2rem;font-weight:500;color:var(--ink-lead);margin-bottom:40px;line-height:1.5;text-wrap:pretty}
.doc h2{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;margin:40px 0 12px;padding-top:28px;border-top:1px solid var(--line);text-wrap:balance}
.doc h2 b{font-family:var(--mono);font-weight:500;font-size:.8125rem;color:var(--green);letter-spacing:.06em;margin-right:10px;vertical-align:.1em}
.doc h3{font-size:1rem;font-weight:600;margin:26px 0 8px}
.doc p{margin-bottom:14px;color:var(--ink2);text-wrap:pretty}
.doc p strong,.doc li strong{color:var(--ink);font-weight:600}
.doc ul{margin:0 0 16px;list-style:none}
.doc li{position:relative;padding-left:20px;margin-bottom:8px;color:var(--ink2);text-wrap:pretty}
.doc li::before{content:'';position:absolute;left:2px;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--ink3)}
.doc code{font-family:var(--mono);font-size:.88em;color:var(--ink)}
.doc a.in{color:var(--green);text-decoration:none;border-bottom:1px solid rgb(74 222 128/.35);transition:border-color var(--t) var(--ease)}
.doc a.in:hover{border-bottom-color:var(--green)}
.doc a.in:active{opacity:.6}
.doc table{width:100%;border-collapse:collapse;margin:4px 0 18px;font-size:.95rem}
.doc th,.doc td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-weight:500;color:var(--ink2);padding-right:16px}
.doc td{font-family:var(--mono);font-size:.875rem;color:var(--ink);white-space:nowrap}
@media(min-width:760px){.doc{padding-top:88px;padding-bottom:120px}}

@media(prefers-reduced-motion:reduce){
  .top,.top nav a,.foot-links a,.t-lead a,.doc a.in{transition:none}
}