:root {
  --ink: #1c1915;
  --muted: #3a342c;
  --paper: #f3eee6;
  --card: #fffdf8;
  --line: #d4cbbd;
  --accent: #1d4a38;
  --accent-ink: #0f2e22;
  --soft: #e5f2eb;
  --amber: #f8f1dc;
  --amber-ink: #5c4814;
  --danger: #8c1c2c;
  --focus: #084a86;
  --shadow: 0 1px 0 rgba(28, 25, 21, 0.06);
  color-scheme: light;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

body::before {
  content: "";
  display: block;
  height: 6px;
  background: var(--accent);
}

body.large-text,
body.large-text p,
body.large-text li,
body.large-text label,
body.large-text legend,
body.large-text input,
body.large-text textarea,
body.large-text button,
body.large-text a,
body.large-text td,
body.large-text th,
body.large-text .meta,
body.large-text .lede,
body.large-text .hint,
body.large-text .kicker,
body.large-text .badge,
body.large-text .readout {
  font-size: 22px;
}

body.large-text h1 { font-size: 36px; }
body.large-text h2 { font-size: 28px; }
body.large-text h3 { font-size: 24px; }

/* Large-print brief grows on screen. @media print below keeps its own sizes. */
body.large-print {
  font-size: 26px;
  line-height: 1.45;
}

body.large-print p,
body.large-print li,
body.large-print td,
body.large-print th,
body.large-print label,
body.large-print .brief-disclaimer,
body.large-print .kicker,
body.large-print .meta {
  font-size: 26px;
  line-height: 1.45;
}

body.large-print h1 { font-size: 40px; }
body.large-print h2 { font-size: 32px; }
body.large-print h3 { font-size: 26px; }

/* The brief grows. Without large text, the site header stays at 18px.
   With large text as well, the rules below lift the header to the 22px floor. */
body.large-print .site-header,
body.large-print .site-header a,
body.large-print .site-header button {
  font-size: 18px;
  line-height: 1.4;
}

body.large-print .site-header .brand {
  font-size: 1.35rem;
}

:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  transform: translateY(-150%);
  background: var(--card);
  color: var(--ink);
  padding: 0.4rem 0.7rem;
  z-index: 5;
}

.skip:focus { transform: none; }

.site-header,
main,
.site-footer {
  width: min(46rem, calc(100% - 2rem));
  margin-left: auto;
  margin-right: auto;
}

.site-header {
  padding: 1.1rem 0 0.6rem;
  border-bottom: 1px solid var(--line);
}

.brand {
  margin: 0 0 0.45rem;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.brand a {
  color: var(--accent-ink);
  text-decoration: none;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li { display: flex; align-items: center; }

nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 2px;
}

nav .inline-form { margin: 0; }

nav a,
button.linkish {
  color: var(--accent-ink);
  font-weight: 650;
}

main { padding: 1.25rem 0 2.5rem; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.5rem; }

h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.4rem; margin-top: 1.6rem; }
h3 { font-size: 1.15rem; margin-top: 1rem; }

p { margin: 0.4rem 0 0.8rem; }

a { color: var(--focus); }

.lede { color: var(--muted); font-size: 1.05rem; }

.kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.meta, .hint { color: var(--muted); }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 1rem 0 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.stack { display: grid; gap: 0.85rem; max-width: 36rem; }

.field { display: grid; gap: 0.25rem; }

.field.check {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.6rem;
}

.field.check input { margin-top: 0.35rem; }

label { font-weight: 650; }

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: #fff;
  border: 2px solid #8d8376;
  border-radius: 6px;
  padding: 0.45rem 0.6rem;
}

input[type="range"] { width: 100%; accent-color: var(--accent); }

button,
.button {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 6px;
  padding: 0.45rem 0.8rem;
  text-decoration: none;
  cursor: pointer;
  min-height: 2.6rem;
}

.button.secondary,
button.secondary {
  color: var(--accent-ink);
  background: var(--card);
}

button:hover,
.button:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
}

button.secondary:hover,
.button.secondary:hover {
  background: var(--soft);
  border-color: var(--accent);
  color: var(--accent-ink);
}

button.danger:hover,
.button.danger:hover {
  background: #6d1220;
  border-color: #6d1220;
}

.button.danger,
button.danger {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

button.linkish {
  background: transparent;
  border: 0;
  padding: 0;
  min-height: 0;
  font-weight: 650;
  color: var(--accent-ink);
  text-decoration: underline;
}

.actions, .inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.visit-edit {
  margin: 0 0 1.2rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem 0.85rem;
  background: var(--card);
}

.visit-edit summary {
  cursor: pointer;
  font-weight: 700;
  padding: 0.25rem 0;
}

.visit-edit[open] summary { margin-bottom: 0.7rem; }

.demo-box,
.next-banner,
.access-card,
.top-three,
.carry,
.starters,
.status,
.error-summary {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.demo-box, .next-banner { margin: 1rem 0 1.4rem; }

.next-banner { background: var(--soft); border-color: #b7d4c4; }

.access-card {
  background: var(--amber);
  border-color: #e0d2a4;
  margin: 1rem 0;
}

.access-card h2, .top-three h3 { margin-top: 0; }

.top-three {
  background: var(--soft);
  border-color: #b7d4c4;
  margin-bottom: 0.8rem;
}

.demo-list, .med-lines {
  padding-left: 1.2rem;
}

.visit-list,
.diary-list,
.starters ul,
.carry ul,
.med-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.questions {
  list-style: none;
  margin: 0.2rem 0 0.6rem;
  padding-left: 0;
}

.visit-list { list-style: none; padding-left: 0; }

.visit-list article,
.diary-list article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0.6rem 0;
}

.badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.mono {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.question {
  margin: 0.7rem 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.question-text { margin-bottom: 0.4rem; }

.q-num { font-weight: 800; color: var(--accent-ink); }

.question-actions { display: flex; flex-wrap: wrap; gap: 0.45rem 0.55rem; align-items: center; }

.question-actions form { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }

.asked-form label { font-weight: 650; }

.choice-row > span { flex: 1 1 12rem; min-width: 0; }

.brief-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 0.75rem;
}

.med-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 1rem 1rem;
  margin: 0.7rem 0;
}

.med-card .med-line { margin: 0 0 0.7rem; font-size: 1.05rem; }

body:has(article.brief) .site-footer { display: none; }

.error-summary {
  background: #fff1f2;
  border-color: #e4b3ba;
  margin-bottom: 1rem;
}

.field-error { color: var(--danger); font-weight: 700; margin: 0.2rem 0 0; }

.status {
  background: var(--soft);
  border-color: #b7d4c4;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 1rem 1rem;
}

legend { font-weight: 800; padding: 0 0.3rem; }

table { width: 100%; max-width: 100%; border-collapse: collapse; background: var(--card); }

article.brief table { table-layout: fixed; }

article.brief th,
article.brief td { overflow-wrap: anywhere; }

article.brief th:nth-child(1),
article.brief td:nth-child(1) { width: 24%; }

article.brief th:nth-child(3),
article.brief td:nth-child(3) { width: 30%; }

th, td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  padding: 0.45rem 0.4rem;
}

.med-line { font-weight: 700; }

.med-edit {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: end;
  margin-bottom: 0.4rem;
}

.tick {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  margin-right: 0.35em;
  vertical-align: -0.1em;
  position: relative;
}

.tick.is-on::after {
  content: "";
  position: absolute;
  left: 0.22em;
  top: 0.02em;
  width: 0.25em;
  height: 0.48em;
  border: solid currentColor;
  border-width: 0 0.14em 0.14em 0;
  transform: rotate(45deg);
}

.brief-head { margin-bottom: 0.6rem; }

.brief-disclaimer { margin-top: 1.2rem; font-size: 0.95rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.table-wrap { overflow-x: auto; }

body.high-contrast {
  --ink: #fff;
  --muted: #fff;
  --paper: #000;
  --card: #000;
  --line: #fff;
  --accent: #fff;
  --accent-ink: #fff;
  --soft: #000;
  --amber: #000;
  --amber-ink: #fff;
  --danger: #fff;
  --focus: #ffe14a;
  --shadow: none;
  background: #000;
  color: #fff;
  color-scheme: dark;
}

body.high-contrast a,
body.high-contrast .brand a,
body.high-contrast button.linkish,
body.high-contrast nav a { color: #ffe14a; }

body.high-contrast .button.secondary,
body.high-contrast button.secondary,
body.high-contrast button.linkish {
  color: #ffe14a;
  background: #000;
  border-color: #ffe14a;
}

body.high-contrast button,
body.high-contrast .button {
  background: #fff;
  color: #000;
  border-color: #fff;
}

body.high-contrast .button.danger,
body.high-contrast button.danger {
  background: #ffe14a;
  color: #000;
  border-color: #ffe14a;
}

body.high-contrast input,
body.high-contrast textarea {
  background: #fff;
  color: #000;
  border-color: #fff;
}

body.high-contrast .demo-box,
body.high-contrast .next-banner,
body.high-contrast .access-card,
body.high-contrast .top-three,
body.high-contrast .carry,
body.high-contrast .starters,
body.high-contrast .status,
body.high-contrast .error-summary,
body.high-contrast .visit-edit,
body.high-contrast .visit-list article,
body.high-contrast .diary-list article,
body.high-contrast .med-card,
body.high-contrast fieldset,
body.high-contrast table {
  background: #000;
  color: #fff;
  border-color: #fff;
}

body.high-contrast .badge { background: #ffe14a; color: #000; }

body.high-contrast :focus { outline-color: #ffe14a; }

body.high-contrast::before { background: #ffe14a; }

body.high-contrast button:hover,
body.high-contrast .button:hover,
body.high-contrast button.secondary:hover,
body.high-contrast .button.secondary:hover,
body.high-contrast button.danger:hover,
body.high-contrast .button.danger:hover {
  background: #ffe14a;
  color: #000;
  border-color: #ffe14a;
}

@media (max-width: 720px) {
  .med-edit { grid-template-columns: 1fr; }
  body { font-size: 17px; }
  body.large-text,
  body.large-text p,
  body.large-text li,
  body.large-text label,
  body.large-text input,
  body.large-text textarea,
  body.large-text button,
  body.large-text a { font-size: 22px; }
}

@media (max-width: 480px) {
  .mono { font-size: 14px; }
  .demo-box { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Large-text floor. Specificity beats .mono, .med-card .med-line, the
   large-print header, and body.large-text a. Print !important sizes are unchanged. */
body.large-text .mono {
  font-size: 22px;
}

body.large-text .med-card .med-line,
body.large-text h3.med-line {
  font-size: 24px;
}

body.large-print.large-text .med-card .med-line,
body.large-print.large-text h3.med-line {
  font-size: 26px;
}

body.large-text h1 a,
body.large-text h2 a,
body.large-text h3 a {
  font-size: inherit;
}

body.large-print.large-text .site-header,
body.large-print.large-text .site-header a,
body.large-print.large-text .site-header button,
body.large-print.large-text .site-header .brand {
  font-size: 22px;
}

@page { margin: 0.4in; }

@media print {
  body::before,
  .site-header,
  .skip,
  .no-print,
  .brief-tools,
  script { display: none !important; }

  html, body {
    background: #fff !important;
    color: #000 !important;
  }

  body:not(.large-print),
  body:not(.large-print) p,
  body:not(.large-print) li,
  body:not(.large-print) td,
  body:not(.large-print) th,
  body:not(.large-print) h1,
  body:not(.large-print) h2,
  body:not(.large-print) h3,
  body:not(.large-print) .brief-disclaimer {
    font-size: 10.5pt !important;
    line-height: 1.25 !important;
  }

  body:not(.large-print) h1 { font-size: 16pt !important; }
  body:not(.large-print) h2 { font-size: 12.5pt !important; }
  body:not(.large-print) h3 { font-size: 11.5pt !important; }

  body.large-print,
  body.large-print p,
  body.large-print li,
  body.large-print td,
  body.large-print th,
  body.large-print .kicker,
  body.large-print .brief-disclaimer { font-size: 16pt !important; line-height: 1.35 !important; }
  body.large-print h1 { font-size: 22pt !important; }
  body.large-print h2 { font-size: 18pt !important; }
  body.large-print h3 { font-size: 16pt !important; }

  main, .site-footer, .site-header {
    width: auto;
    margin: 0;
  }

  main { padding: 0; }

  .site-footer {
    border: 0;
    padding: 0.3rem 0 0;
    color: #000 !important;
    font-size: 9pt !important;
  }

  body:has(.brief) .site-footer { display: none !important; }

  .access-card,
  .top-three,
  .demo-box,
  .next-banner,
  .visit-list article,
  .diary-list article,
  table,
  fieldset {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border-color: #000 !important;
  }

  a, .kicker, .badge, .q-num { color: #000 !important; }

  h1, h2, h3 { break-after: avoid; }
  .access-card, .top-three, tr, li { break-inside: avoid; }
}