/* System fonts keep the app usable offline. */
:root {
  --ground: #0b141b;
  --veil: rgba(11, 20, 27, .72);
  --surface: #111b23;
  --surface-2: #17232d;
  --line: rgba(255, 255, 255, .08);
  --fg: #e8edf1;
  --muted: #8d9ba7;
  --bubble-jet: #1b2630;
  --bubble-user: #1f4566;
  --on-user: #f3f7fa;
  --accent: #3d8bff;
  --link-jet: #8cc4ff;
  --link-user: #d4e9ff;
  --danger: #ff7b72;
  --warning: #f2b154;
  --ok: #3ddc97;
  --file-pdf: #ff8a70;
  --file-html: #f2b154;
  --file-md: #8cc4ff;
  --file-xlsx: #6fcf97;
  --file-csv: #4fd1c5;
  --file-txt: #b8c4ce;
  --file-image: #c792ea;
  --focus: #8cc4ff;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --drawer-w: 240px;
  --lane: 60px;
  --lane-scale: .24;
  --empty-scale: .6;
  /* The empty state centres Jet, the two greeting lines, the composer and the gaps between them as one block. */
  --empty-block: calc(240px * var(--empty-scale) + 135px);
  --gutter: 16px;
  --text-size: 15px;
  --text-line: 21px;
  color-scheme: dark;
}
@media (max-width: 759.98px) {
  :root { --lane: 48px; --lane-scale: .21; --empty-scale: .54; --text-size: 16px; --text-line: 22px; }
}
@media (max-width: 419.98px) {
  :root { --empty-scale: .48; --gutter: 12px; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--ground);
  color: var(--fg);
  font: 15px/21px var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.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; }
[hidden] { display: none !important; }

.page { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; overflow: hidden; }
.main { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.page[data-layout="centred"] .main { grid-template-rows: minmax(0, 1fr); }

.stage {
  grid-row: 1; grid-column: 1;
  position: relative; min-height: 0;
  background:
    linear-gradient(var(--veil), var(--veil)),
    url(assets/tile.png) 0 0 / 512px 512px repeat,
    var(--ground);
}

.icon-button {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; border-radius: 12px; color: var(--fg);
}
.icon-button:hover { background: rgba(255, 255, 255, .06); }
.action {
  min-height: 44px; padding: 0 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 22px;
  font-size: 14px; font-weight: 600;
}
.action:hover:not(:disabled) { background: #1d2c38; }
.action:disabled { opacity: .45; }
.action.danger { color: var(--danger); border-color: rgba(255, 123, 114, .4); }

@media (max-width: 759.98px) {
  .page { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}