:root { color-scheme: light; font-family: system-ui, sans-serif; color: #173642; background: #edf6f9; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 900px; margin: auto; padding: .5rem; }
h2 { font-size: 1.25rem; }
button, input, select, textarea { font: inherit; font-size: 16px; }
button { min-height: 44px; padding: .6rem 1rem; border: 1px solid #006c86; border-radius: .4rem; background: white; color: #005870; cursor: pointer; }
button:hover, #send { background: #006c86; color: white; }
button:disabled { opacity: .6; cursor: default; }
:focus-visible { outline: 3px solid #b85400; outline-offset: 3px; }
#pages { display: grid; gap: 1rem; }
.sheet { position: relative; width: 100%; aspect-ratio: 595.5 / 842.249979; background: white; }
.background { position: absolute; width: 100%; height: 100%; pointer-events: none; }
.page-fragment, .responsive-fields { display: contents; }
.fragment-background, .field-caption { display: none; }
.field { position: absolute; margin: 0; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; height: 100%; border: 1px solid #0094b8; border-radius: 2px;
  background: #e6f8ffed; color: #123; padding: 0 3px; min-width: 0;
  font-size: 16px;
}
.field textarea { resize: none; overflow: auto; line-height: 1.4; padding: 4px; cursor: text; }
.field:focus-within { z-index: 3; }
.field:focus-within input:not([type="checkbox"]):not([type="radio"]), .field:focus-within select {
  position: relative; min-height: 44px;
}
.field.choice { display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; cursor: pointer; }
.choice input { appearance: none; width: 18px; height: 18px; border: 2px solid #006c86; border-radius: 50%; background: #e6f8ffed; cursor: pointer; margin: 0; }
.choice input:checked { background: #006c86; box-shadow: inset 0 0 0 3px white; }
.choice input[type="checkbox"]:checked::after { content: "✓"; color: white; display: block; font-size: 12px; text-align: center; line-height: 14px; }
.choice input[type="checkbox"]:checked { box-shadow: none; }
.field.choice:has(input[type="checkbox"]) { min-height: 24px; }
.page-label { position: absolute; font-size: clamp(10px, 1.65vw, 16px); display: flex; align-items: center; }
#review { background: white; padding: 1rem; margin-top: 1rem; border-radius: .5rem; }
#review input { display: block; width: 100%; max-width: 450px; min-height: 44px; margin: .5rem 0; padding: .5rem; }
#review button { margin: .3rem 0; }
#status, #storage-status { white-space: pre-wrap; overflow-wrap: anywhere; padding: .5rem; }
#status:empty, #storage-status:empty { display: none; }
#status.error { background: #fff0ef; color: #8e2115; }
#status.success { background: #dcf4df; color: #175c27; }
body.busy form, body.busy #new { pointer-events: none; }
#new { margin-top: 1rem; font-size: .875rem; }
@media (max-width: 600px) {
  .responsive-sheet { aspect-ratio: auto; }
  .responsive-sheet > .background, .responsive-sheet > .page-label { display: none; }
  .page-fragment { display: block; position: relative; overflow: hidden; }
  .fragment-background { display: block; position: absolute; width: 100%; height: auto; pointer-events: none; }
  .page-fragment .field { top: var(--mobile-top) !important; height: var(--mobile-height) !important; }
  .responsive-fields { display: grid; gap: .5rem; margin-inline: 10%; padding: .5rem; background: #e6f8ff; border-radius: .4rem; }
  .responsive-fields .field {
    position: static; width: auto !important; height: auto !important;
    transform: none; min-height: 44px;
  }
  .responsive-fields .field-caption { display: block; font-size: .875rem; margin-bottom: .2rem; }
  .responsive-fields .field input:not([type="checkbox"]), .responsive-fields .field select { height: 44px; }
  .responsive-fields .field textarea { height: 88px; }
  .responsive-fields .field.choice:has(input) { justify-content: start; gap: .6rem; min-height: 44px; }
  .responsive-fields .choice input { order: -1; width: 24px; height: 24px; flex-shrink: 0; }
  .responsive-fields .choice .field-caption { margin: 0; }
}