/*
 * Intent's whole stylesheet: a thin layer over browser defaults.
 * If this file fails to load, layout should suffer but look-and-feel should not.
 * Colors come from the browser via color-scheme; no custom palette.
 */

:root {
  color-scheme: light dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

body {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
  line-height: 1.5;
}

header,
footer {
  padding-block: 1rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav form {
  margin: 0;
}

table {
  border-collapse: collapse;
}

th,
td {
  padding: 0.25rem 0.75rem 0.25rem 0;
  text-align: start;
  vertical-align: top;
}

p,
li,
dd {
  max-width: 70ch;
}

img {
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -100vw;
}

.skip-link:focus {
  position: static;
}

.muted {
  color: color-mix(in srgb, CanvasText 70%, Canvas);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}