/* ecliptic.sh: the product's own look. The colours are VS Code Dark
   Modern's as the app draws them (the token's id is in the comment), and
   Light Modern's when the system prefers light, as the app follows the
   desktop. No web fonts: the system's UI font and its monospace font. */

:root {
  color-scheme: dark;
  --bg: #1f1f1f;            /* editor.background */
  --bg-raised: #181818;     /* titleBar, sideBar, statusBar.background */
  --bg-input: #313131;      /* input.background */
  --hover: #2a2d2e;         /* list.hoverBackground */
  --border: #2b2b2b;        /* titleBar.border, sideBar.border */
  --border-strong: #3c3c3c; /* window.activeBorder, input.border */
  --fg: #cccccc;            /* foreground */
  --fg-strong: #e7e7e7;     /* ecliptic.emphasisForeground */
  --fg-muted: #9d9d9d;      /* descriptionForeground */
  --accent: #0078d4;        /* focusBorder, button.background */
  --link: #4daafc;          /* textLink.foreground */
  --added: #81b88b;         /* gitDecoration.addedResourceForeground */
  --removed: #e4676b;       /* errorForeground */
  --code-bg: #3c3c3c;       /* textPreformat.background */
  --code-fg: #d0d0d0;       /* textPreformat.foreground */
  --node: #e8e8e8;          /* the icon's lanes */
  --flash: rgba(0, 120, 212, 0.4); /* ecliptic.flashBackground */
  --font: system-ui, -apple-system, "Segoe UI", Ubuntu, Cantarell, "Noto Sans", "Droid Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #ffffff;
    --bg-raised: #f8f8f8;
    --bg-input: #ffffff;
    --hover: #f2f2f2;
    --border: #e5e5e5;
    --border-strong: #cecece;
    --fg: #3b3b3b;
    --fg-strong: #1f1f1f;
    --fg-muted: #6b6b6b;
    --accent: #005fb8;
    --link: #005fb8;
    --added: #587c0c;
    --removed: #ad0707;
    --code-bg: #ececec;
    --code-fg: #3b3b3b;
    --node: #1f1f1f;
    --flash: rgba(0, 95, 184, 0.2);
  }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--fg-strong);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
}

p, ul, ol, pre, table, blockquote, figure, dl { margin: 0 0 1rem; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code, kbd, pre, samp { font-family: var(--mono); }

code { font-size: 0.9em; }

:not(pre) > code {
  background: var(--code-bg);
  color: var(--code-fg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

pre {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.875rem 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.55;
  tab-size: 4;
}

pre code { font-size: inherit; }

kbd {
  font-size: 0.85em;
  color: var(--fg-strong);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 0.05em 0.4em;
}

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

blockquote {
  border-left: 3px solid var(--border-strong);
  margin-left: 0;
  padding-left: 1rem;
  color: var(--fg-muted);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.5rem 1rem 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

th { color: var(--fg-strong); font-weight: 600; }

/* Code in a cell wraps at spaces only; a wide table scrolls instead. */
td code, th code { white-space: normal; overflow-wrap: normal; }

/* A flag or a path stays on one line. */
.keep td:first-child code, .keep td:nth-child(2) code { white-space: nowrap; }

.table-wrap { overflow-x: auto; margin: 0 0 1rem; }

.table-wrap table { margin: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 48rem) {
  .wrap { padding: 0 2rem; }
}

/* The window frame: a title bar at the top, a status bar at the bottom. */

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 0.75rem;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
}

.skip:focus { top: 0; }

.titlebar {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
}

.titlebar .wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  min-height: 2.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fg-strong);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.4rem 0.75rem 0.4rem 0;
  margin-right: 0.25rem;
}

.brand svg { width: 20px; height: 20px; }

.menubar { display: flex; flex-wrap: wrap; }

.menubar a {
  color: var(--fg);
  text-decoration: none;
  padding: 0.4rem 0.5rem;
  border-radius: 4px;
}

.menubar a:hover { background: var(--hover); color: var(--fg-strong); }

.menubar a[aria-current="page"] { color: var(--fg-strong); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }

.statusbar {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  margin-top: 4rem;
}

.statusbar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 2rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.statusbar a, .statusbar span { color: var(--fg); text-decoration: none; padding: 0.15rem 0.25rem; }

.statusbar a:hover { background: var(--hover); color: var(--fg-strong); border-radius: 3px; }

.statusbar .end { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }

.statusbar .scheme-light { display: none; }

@media (prefers-color-scheme: light) {
  .statusbar .scheme-dark { display: none; }
  .statusbar .scheme-light { display: inline; }
}

/* Home */

.hero { padding: 3rem 0 1.5rem; }

@media (min-width: 48rem) {
  .hero { padding: 5rem 0 2.5rem; }
}

.hero h1 {
  font-size: clamp(3rem, 9vw, 5.5rem);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 1.25rem;
}

.hero .lead {
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.5;
  max-width: 44rem;
  margin-bottom: 0.75rem;
}

.hero .facts {
  color: var(--fg-muted);
  margin-bottom: 2rem;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  margin-top: 1.5rem;
}

.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 2px;
}

.button:hover { text-decoration: underline; }

.button.secondary {
  background: var(--bg-input);
  color: var(--fg-strong);
  border: 1px solid var(--border-strong);
}

/* The install command, one per OS */

.install { max-width: 48rem; }

.tabs {
  display: none;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}

.js .tabs { display: flex; }

.tabs button {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
}

.tabs button:hover { color: var(--fg-strong); }

.tabs button[aria-selected="true"] { color: var(--fg-strong); border-bottom-color: var(--accent); }

.panel-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  margin: 1rem 0 0.5rem;
}

.panel:first-of-type .panel-title { margin-top: 0; }

.js .panel-title { display: none; }

/* Before site.js runs, the inline script's class picks the panel to show. */
.js [data-install]:not([data-ready]) .panel[data-os="windows"] { display: none; }
.js.os-windows [data-install]:not([data-ready]) .panel[data-os="unix"] { display: none; }
.js.os-windows [data-install]:not([data-ready]) .panel[data-os="windows"] { display: block; }

.command {
  position: relative;
  margin: 0;
}

.command pre {
  margin: 0;
  background: var(--bg-raised);
  border-color: var(--border-strong);
  font-size: 0.9375rem;
  padding: 0.875rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.js .command pre { padding-right: 4.75rem; }

.copy {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  font: inherit;
  font-size: 0.75rem;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.copy:hover { background: var(--hover); color: var(--fg-strong); }

.install-note {
  font-size: 0.9375rem;
  color: var(--fg-muted);
  margin: 0.75rem 0 0;
}

/* The demo */

.demo { margin: 2.5rem 0 0; }

.demo video, .demo .demo-fallback {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #1f1f1f;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

.demo figcaption, .gallery figcaption {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Sections */

.section { padding-top: 3.5rem; }

.section > h2 { font-size: 1.75rem; margin-bottom: 1.25rem; }

.section > .lead { max-width: 44rem; margin-bottom: 1.5rem; }

.features {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.feature h3 { font-size: 1.25rem; margin-bottom: 0.375rem; }

.feature p { margin-bottom: 0.5rem; }

.measured { max-width: 40rem; }

.measured .before { color: var(--removed); }

.measured .after { color: var(--added); }

.gallery {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
}

.gallery figure { margin: 0; }

.gallery img, .prose img {
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

.platforms {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-top: 1.5rem;
}

.platform {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1.25rem;
}

.platform h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }

.platform ul { padding-left: 1.1rem; margin-bottom: 0.75rem; }

.platform li { margin-bottom: 0.25rem; }

.platform p:last-child { margin-bottom: 0; }

.note { font-size: 0.875rem; color: var(--fg-muted); }

/* Inner pages */

.page { padding-top: 2.5rem; }

.page-head { margin-bottom: 2rem; }

.page-head h1 { font-size: clamp(1.875rem, 4vw, 2.5rem); letter-spacing: -0.02em; }

.page-head .lead { font-size: 1.125rem; max-width: 44rem; margin: 0; }

.docs {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .docs { grid-template-columns: 13rem minmax(0, 1fr); gap: 3.5rem; }
  .docs > aside {
    position: sticky;
    top: 1.5rem;
    align-self: start;
    max-height: calc(100vh - 3rem);
    overflow: auto;
  }
}

.sidenav h2 {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin: 0 0 0.5rem;
}

.sidenav ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.sidenav li { margin: 0; }

.sidenav a {
  display: block;
  color: var(--fg);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 0.3rem 0.75rem;
  border-left: 2px solid transparent;
  border-radius: 0 3px 3px 0;
}

.sidenav a:hover { background: var(--hover); color: var(--fg-strong); }

/* The active entry wears the Activity Bar's mark: a 2 px line on its left. */
.sidenav a[aria-current="page"] { border-left-color: var(--accent); color: var(--fg-strong); }

.sidenav .toc a { font-size: 0.875rem; padding: 0.2rem 0.75rem; }

/* Narrow: the side bar's lists wrap into rows above the text. */
@media (max-width: 55.99rem) {
  .sidenav ul { display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; margin-bottom: 1.25rem; }
  .sidenav a, .sidenav .toc a {
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.2rem 0.6rem;
    font-size: 0.875rem;
  }
  .sidenav a[aria-current="page"] { border-color: var(--accent); }
}

.prose > :first-child { margin-top: 0; }

.prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }

.prose h3 { font-size: 1.125rem; margin-top: 2rem; }

.prose h4 { font-size: 1rem; margin-top: 1.5rem; }

.prose ul, .prose ol { padding-left: 1.4rem; }

.prose li { margin-bottom: 0.35rem; }

.prose li > p { margin-bottom: 0.35rem; }

/* A heading reached through a link flashes blue for two seconds, as a
   changed row does in the app, then keeps a mark on its left edge. */
.prose :target, .changelog :target {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
  border-radius: 3px;
  animation: flash 2s ease-out;
  scroll-margin-top: 1rem;
}

@keyframes flash {
  from { background-color: var(--flash); }
  to { background-color: transparent; }
}

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card {
  display: block;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  color: var(--fg);
  text-decoration: none;
}

.card:hover { background: var(--hover); border-color: var(--border-strong); text-decoration: none; }

.card h2 { font-size: 1.0625rem; margin-bottom: 0.25rem; }

.card:hover h2 { text-decoration: underline; }

.card p { margin: 0; font-size: 0.9375rem; }

/* The changelog as a commit lane: each version a node, Unreleased the
   HEAD ring, as the Graph draws them. */
.history {
  position: relative;
  margin-left: 0.5rem;
  padding-left: 1.75rem;
  border-left: 2px solid var(--node);
}

.history h2 { position: relative; }

.history h2::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 8px);
  top: 0.45em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--node);
  border: 2px solid var(--bg);
  box-sizing: content-box;
}

.history h2.head::before {
  background: var(--bg);
  border: 3px solid var(--accent);
  width: 8px;
  height: 8px;
}

/* 404 */

.notfound { padding: 5rem 0; }

.notfound h1 { font-size: clamp(2rem, 6vw, 3rem); }

/* Motion is the flash alone; without it, the mark alone. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .titlebar, .statusbar, .skip, .copy, .tabs { display: none; }
  .js .panel-title { display: block; }
  .js .panel { display: block !important; }
}