* {
  box-sizing:border-box
}
html {
  font-family:var(--font-family);
  background:var(--color-background);
  color:var(--color-text);
  font-size:var(--font-base);
  line-height:var(--line-base);
  scroll-padding-bottom:var(--bottom-nav-height)
}
body {
  margin:0
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
a {
  color:inherit;
  text-decoration:none
}
button {
  color:inherit
}
img {
  max-width:100%;
  display:block
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:var(--font-xl);
  line-height:var(--line-tight)
}
h2 {
  font-size:var(--font-title)
}
h3 {
  font-size:var(--font-md)
}
:focus-visible {
  outline:var(--border-selected) solid var(--color-primary);
  outline-offset:var(--space-2)
}
[hidden] {
  display:none!important
}
.app-shell {
  max-width:var(--page-max);
  margin-inline:auto;
  min-height:100dvh;
  background:var(--color-background)
}

#site-footer:empty { display: none; }
body:has(#site-footer:not(:empty)) .app-shell { min-height: 0; }
body:has(#site-footer:not(:empty)) .home-page { padding-bottom: var(--space-8); }
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  max-width: var(--page-max);
  margin: auto;
  padding: var(--space-4) var(--space-8) calc(var(--bottom-nav-height) + var(--space-4));
  color: var(--color-text-muted);
  font-size: var(--font-xs);
  text-align: center;
}
.site-footer a { color: inherit; }
.page {
  padding:var(--space-4) var(--space-8) calc(var(--bottom-nav-height) + var(--space-10) + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:var(--space-6)
}
.row {
  display:flex;
  align-items:center;
  gap:var(--space-4)
}
.row--between {
  justify-content:space-between
}
.stack {
  display:flex;
  flex-direction:column;
  gap:var(--space-6)
}
.grow {
  flex:1;
  min-width:0
}
.muted {
  color:var(--color-text-muted)
}
.small {
  font-size:var(--font-sm)
}
.pretext {
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.sr-only {
  position:absolute;
  width:var(--border-width);
  height:var(--border-width);
  overflow:hidden;
  clip-path:inset(50%)
}


body.modal-open {
  overflow:hidden
}
.option:has(input:checked) {
  border-color:var(--color-primary);
  background:var(--color-primary-soft)
}
.option input {
  accent-color:var(--color-primary);
  width:var(--icon-size);
  height:var(--icon-size);
  flex:none
}
input[type=checkbox] {
  accent-color:var(--color-primary);
  width:var(--icon-size);
  height:var(--icon-size)
}