/* Atkinson Hyperlegible was designed by the Braille Institute for low-vision readers. */
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap");

:root {
  --river: #123d4a;
  --river-light: #1d5a6b;
  --paper: #f4f7f6;
  --panel: #ffffff;
  --ink: #14232b;
  --muted: #3d4f57;
  --reed: #0f5c4a;
  --reed-dark: #0a4537;
  --notice: #ffe27a;
  --notice-ink: #2b2100;
  --link: #0b5a7a;
  --focus: #ffb000;
  --line: #9fb3b9;
  --done: #e3f4ec;
  --done-line: #0f5c4a;
  --locked: #fdeaea;
  --locked-line: #9b1c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1d22;
    --panel: #172a31;
    --ink: #eef4f5;
    --muted: #c3d2d6;
    --link: #8fd3ef;
    --line: #5d7880;
    --done: #12352b;
    --done-line: #6fd1a7;
    --locked: #3d1717;
    --locked-line: #f29b9b;
  }
}

* { box-sizing: border-box; }

html { font-size: 112.5%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif;
  line-height: 1.6;
}

a { color: var(--link); text-underline-offset: 0.2em; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -10rem;
  background: var(--panel);
  color: var(--ink);
  padding: 0.75rem 1rem;
  border: 3px solid var(--focus);
  z-index: 10;
}

.skip-link:focus { top: 1rem; }

.notice {
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: var(--notice);
  color: var(--notice-ink);
  text-align: center;
}

.site-header {
  background: var(--river);
  color: #ffffff;
}

.header-inner,
.page,
.footer-inner {
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.brand svg { flex: none; }

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

.site-nav a { color: #ffffff; }

.page {
  display: grid;
  gap: 2rem;
  padding-top: 2.5rem;
  padding-bottom: 3rem;
}

@media (min-width: 50rem) {
  .page {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.sign-in {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 6px solid var(--reed);
  border-radius: 0.5rem;
  padding: 1.75rem;
}

h1 {
  margin: 0 0 0.5rem;
  font-size: 1.9rem;
  line-height: 1.2;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  line-height: 1.3;
}

.intro { margin: 0 0 1.5rem; color: var(--muted); }

.field { margin-bottom: 1.25rem; }

label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.hint {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
}

input[type="text"],
input[type="password"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--muted);
  border-radius: 0.35rem;
}

.check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.check input {
  width: 1.4rem;
  height: 1.4rem;
  margin: 0;
}

.check label {
  margin: 0;
  font-weight: 400;
}

button {
  min-height: 3rem;
  padding: 0.6rem 2rem;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  background: var(--reed);
  border: 2px solid var(--reed);
  border-radius: 0.35rem;
  cursor: pointer;
}

button:hover { background: var(--reed-dark); }

.result {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 6px solid var(--done-line);
  background: var(--done);
  font-weight: 700;
}

.result.locked {
  border-left-color: var(--locked-line);
  background: var(--locked);
}

.result:empty {
  margin: 0;
  padding: 0;
  border: 0;
}

.form-links { margin: 1.5rem 0 0; }

.side section + section { margin-top: 2rem; }

.side ul { padding-left: 1.25rem; margin: 0; }

.side li + li { margin-top: 0.5rem; }

.side p { margin: 0 0 0.75rem; }

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.footer-inner { padding-top: 1.25rem; padding-bottom: 1.5rem; }

.footer-inner p { margin: 0; }