/* What the sign-in screen and the toolbox share: the typeface, the colours, the small parts. */

/* Departure Mono by Helena Zhang, SIL Open Font License (fonts/departure-mono-LICENSE.txt).
   It's drawn on an 11 px grid: only 11, 22 and 33 px land exactly on the pixels, so those are the
   only sizes used anywhere. */
@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/departure-mono.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

:root {
  --bg: #131211;
  --panel: #1b1a18;
  --panel-2: #23211e;
  --inset: #0e0d0c;
  --line: #2e2b27;
  --line-2: #4a453d;
  --fg: #ece3d0;        /* the cream of the Naaxa logo */
  --fg-2: #b8ad98;
  --fg-3: #857c6c;
  --fg-4: #575045;
  --accent: #ff8a2a;
  --ok: #a6c34c;
  --warn: #f0b93a;
  --bad: #f2603e;
  --dot: rgba(236, 227, 208, 0.085);   /* an unlit dot */

  --font: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --gutter: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 400 11px/16px var(--font);
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
input { font: inherit; }
kbd { font: inherit; }
::selection { background: var(--line-2); color: var(--fg); }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the preloader's wall of dots: over everything in the toolbox, behind the form on the sign-in screen */
.boot { position: fixed; inset: 0; z-index: 100; display: block; width: 100%; height: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px 5px 11px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--fg);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn kbd { color: var(--fg-3); }
.btn:hover { background: var(--panel-2); border-color: var(--fg-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary kbd { color: inherit; opacity: 0.65; }
.btn.primary:hover { background: var(--fg); border-color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

/* a status light: grey until the first check, then green, amber or red */
.led {
  display: inline-block;
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  color: var(--fg-4);
  background: currentColor;
}
.is-up .led, .led.is-up { color: var(--ok); }
.is-slow .led, .led.is-slow { color: var(--warn); }
.is-down .led, .led.is-down { color: var(--bad); }

@keyframes type-in { from { clip-path: inset(0 100% 0 0); } }
@keyframes blink { 50% { opacity: 0; } }