/* ================================================================== type
   Bricolage Grotesque for display, Outfit for body.

   Self-hosted, not loaded from Google. The app has to start in a cutting with
   no signal, and a font that only arrives over the network means the first
   screen an AP sees is either blank or a system-font substitute that reflows
   the moment signal returns. 73KB for both, cached by the service worker.

   Both files are the variable latin cut, so one file covers every weight.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('assets/fonts/bricolage-grotesque.woff2') format('woff2-variations'),
       url('assets/fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('assets/fonts/outfit.woff2') format('woff2-variations'),
       url('assets/fonts/outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* serials stay monospaced: JR-E-013 has to be read aloud and typed back
     correctly, and a monospaced 0/O and 1/l is the whole point */
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Form controls do not inherit font-family from their ancestors — browsers
   substitute a system face. Every button and input in this app was therefore
   rendering in Arial rather than Outfit, including all the text inside the
   isolation cards, which are buttons. */
button, input, select, textarea, optgroup {
  font-family: inherit;
}

body {
  font-family: var(--font-body);
  /* Outfit sits tall in its line box; below about 1.18x the glyphs start
     colliding with whatever follows. Nothing here goes under that. */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3,
.auth-title, .auth-submit,
.btn, .tabs button, .login-users button,
.count .n, .count .l,
.tile .ref, .tile .stat,
.banner, .fleet th,
.auth-users .au-name, .auth-users .au-role,
.auth-chip b, .sheet-head {
  font-family: var(--font-display);
}

h1, h2, h3, .auth-title { line-height: 1.18; letter-spacing: -0.2px; }
.btn, .auth-submit, .tabs button { letter-spacing: 0.8px; }

/* numbers that get read at a glance: tabular so they do not jitter as counts
   change, and never below 1.2 line-height */
.count .n { font-variant-numeric: tabular-nums; line-height: 1.2; }
.fleet td, .fleet th { line-height: 1.45; }

/* The audit log reads as prose — who did what, to which earth, when — so it
   is set in Outfit like the rest of the app. Only the serials and the
   timestamps inside it stay monospaced, which is the part that gets read
   aloud and typed back. */
/* Only the places a serial is read off a label and typed back stay
   monospaced. A row title is a title — it is set like every other title in
   the app. */
.log .t, .qr-cell .s, .tag-label .ser, .strip-txt,
pre, code { font-family: var(--font-mono); }
.panel.log, .log .ev, .log .ev b { font-family: var(--font-body); }