:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, sans-serif;
  color: #172b34;
  background: #f3f6f7;
  line-height: 1.5;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 1080px; margin: auto; padding: 32px 24px; }
h1 { margin: 0 0 8px; font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.2; }
h2 { margin: 0; font-size: 1.25rem; }
p { overflow-wrap: anywhere; }
.eyebrow { color: #086353; font-weight: 650; margin: 0 0 8px; }
.subtitle, .muted, footer { color: #465963; }
.subtitle { margin-top: 0; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 28px; align-items: start; }
.layout > *, form { min-width: 0; }
.panel, article { background: white; border: 1px solid #c5d1d6; border-radius: 12px; padding: 24px; }
#form-help { margin: 10px 0 20px; }
label { display: block; font-weight: 650; margin-bottom: 6px; }
.required { font-size: .875rem; font-weight: 400; }
input, textarea { display: block; width: 100%; min-width: 0; font: inherit; color: inherit; background: white; border: 1px solid #677c86; border-radius: 6px; padding: 10px; margin-bottom: 20px; }
textarea { min-height: 160px; resize: vertical; }
input[aria-invalid="true"] { border-color: #94212d; }
button { min-height: 44px; max-width: 100%; font: inherit; font-weight: 600; overflow-wrap: anywhere; cursor: pointer; border: 1px solid #086353; border-radius: 6px; padding: 10px 16px; background: #086353; color: white; }
button:hover:not(:disabled) { background: #064f43; }
button:disabled { opacity: .65; cursor: wait; }
button.delete { background: white; border-color: #a12b36; color: #94212d; }
button.delete:hover:not(:disabled) { background: #fff0f1; }
:focus-visible { outline: 3px solid #235fc2; outline-offset: 3px; }
#message { min-height: 1.5em; margin: 24px 0; color: #086353; }
#message[data-error="true"], .noscript { color: #94212d; }
.list-heading { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.empty { padding: 24px; border: 1px dashed #677c86; border-radius: 12px; color: #465963; }
#retry { margin-bottom: 16px; }
#notes { display: grid; gap: 16px; }
article { min-width: 0; }
article h3 { margin: 0 0 12px; font-size: 1.125rem; white-space: pre-wrap; overflow-wrap: anywhere; }
article p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; margin: 0 0 20px; }
article p:empty { display: none; }
footer { border-top: 1px solid #c5d1d6; margin-top: 36px; padding-top: 20px; font-size: .875rem; }
.skip-link { position: absolute; top: 8px; left: 8px; transform: translateY(-200%); background: white; color: #172b34; padding: 12px; z-index: 1; }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 680px) {
  main { padding: 24px 16px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .panel, article { padding: 20px; }
  #save { width: 100%; }
}