/* Reset, type scale, focus, helpers. No colours outside tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-100);
  color: var(--ink);
  font: var(--text-body);
  min-height: 100vh;
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
h1, .h1 { font: var(--text-h1); }
h2, .h2 { font: var(--text-h2); }
h3, .h3 { font: 600 15px/22px var(--font-sans); }
.display { font: var(--text-display); }
.body-small { font: var(--text-body-small); }
.label { font: var(--text-label); color: var(--ink-muted); }
.caption { font: var(--text-caption); color: var(--ink-muted); }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
b, strong { font-weight: 600; }
code { font: 13px/18px ui-monospace, SFMono-Regular, Menlo, monospace; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding-left: 22px; }
.num { font-variant-numeric: tabular-nums; }

/* focus ring everywhere, never outline:none */
:focus-visible { outline: var(--focus); outline-offset: 2px; }
a:focus-visible, button:focus-visible { border-radius: var(--radius-sm); }

/* The surfaces the browser draws for us. Without these a checkbox on Moja
   firma and in the staff administration came up in the operating system's
   own accent - a bright blue on both macOS and Windows - which is a colour
   from outside the token set sitting next to --brand. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
input, textarea { caret-color: var(--brand); }
::selection { background: var(--brand-soft); color: var(--ink); }

/* Press feedback. :hover does nothing on a touch screen, so a tap on a
   button, a pill or a nav item acknowledged nothing at all until the page
   changed. */
.btn:active, .pill:active, .nav-item:active, .tabs a:active { background: var(--surface-100); }
.btn-primary:active { background: var(--brand-hover); }

/* progressive enhancement switches; head.js flips no-js to js */
html.no-js .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }
html.js .js-hide { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  padding: 8px 14px; border-radius: var(--radius-md); font-weight: 600;
}
.skip-link:focus { top: 8px; text-decoration: none; }
.print-only { display: none; }

.tone-danger { color: var(--danger-ink); }
.tone-warning { color: var(--warning-ink); }
.tone-accent { color: var(--accent-ink); }
.muted { color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* The logo, in the three places a reader meets the brand: the public header,
   the login card and the application's own rail. The mark keeps its size at
   every width; only the wordmark under it is ever dropped, and never the
   name, which stays in the document as the image's alt text. */
.brand-logo {
  display: block;
  height: 32px;
  width: auto;
}

.brand-full .brand-logo {
  height: 92px;
}

/* The name as the logo draws it. Three spans and not one, because the
   wordmark is three colours; the <img> alt already carries the whole name
   for a screen reader, so this copy is hidden from one. */
.brand-name {
  font: 700 16px/22px var(--font-sans);
  letter-spacing: -0.015em;
  white-space: nowrap;
  /* The mark is taller than the text because the arc rises above the "p", so
     the shared baseline below sits the name on the bowl of the p rather than
     floating it up against the arc. */
  padding-bottom: 3px;
}

.bn-1 { color: var(--logo-ink); }
.bn-2 { color: var(--logo-teal); }
.bn-3 { color: var(--logo-grey); }

a.brand {
  display: inline-flex;
  /* flex-end and not center: see .brand-name above. */
  align-items: flex-end;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--ink);
}

a.brand:hover {
  text-decoration: none;
}

.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.brand-inverse .brand-name {
  color: var(--on-brand);
}