@import "tokens.css?v=21";
@import "components.css?v=44";

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

html {
  background: var(--bg);
}

[hidden] {
  display: none !important;
}

body {
  margin: var(--space-0);
  min-height: var(--page-min-height);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading);
}

h1,
h2,
h3,
p {
  margin: var(--space-0);
}

h1 {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--heading);
}

h3 {
  font-size: var(--text-subheading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

p {
  font-size: var(--text-body);
  line-height: var(--leading);
}

a {
  color: inherit;
}

a:visited {
  color: inherit;
}

button,
input,
textarea {
  font-family: var(--font);
  font-size: var(--text-body);
  color: var(--ink);
}

.screen ul {
  display: flex;
  flex-direction: column;
  margin: var(--space-0);
  padding: var(--space-0);
  list-style: none;
}

.screen li {
  display: flex;
  margin: var(--space-0);
  padding: var(--space-0);
}

.screen li.list-row {
  padding: 14px 0;
}

.screen nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.screen section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.screen > form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.screen {
  overflow-wrap: break-word;
}

:focus-visible {
  outline-width: var(--border-focus);
  outline-style: solid;
  outline-color: var(--accent);
  outline-offset: 3px;
}

::selection {
  background: var(--fill-strong);
  color: var(--ink);
}

input,
textarea {
  caret-color: var(--accent);
}

body {
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}