/* Old school: the browser's own look, black on white. Only the few rules a phone on site needs. */
body { max-width: 40em; margin: 0 auto; padding: 0 10px 40px; color: #000; background: #fff; }
a, a:visited { color: #000; }
/* 16px stops phones zooming in when a box is tapped. */
input, select, textarea, button { font-size: 16px; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select, textarea { width: 100%; box-sizing: border-box; }
input[type=text], input[type=tel], input[type=email], input[type=number], input[type=date], select { min-height: 44px; }
/* Big enough to hit with a gloved finger. */
button { min-height: 44px; padding: 8px 14px; margin: 4px 0; }
a.go { display: inline-block; min-height: 44px; box-sizing: border-box; padding: 12px 0; }
label.c { display: block; padding: 8px 0; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; vertical-align: middle; }
/* Typed notes in the page's own letters, so they read like the rest of the form. */
textarea { font-family: inherit; }
fieldset { margin: 0 0 12px; }
table { border-collapse: collapse; }
th, td { border: 1px solid #000; padding: 4px; text-align: left; vertical-align: top; }
/* Wide tables scroll sideways on a phone instead of squashing. */
.wide { overflow-x: auto; }
img { max-width: 100%; }
img.logo { max-height: 80px; }
img.photo { max-height: 320px; border: 1px solid #000; }
img.sig { max-height: 60px; }
canvas { display: block; width: 100%; height: 180px; border: 1px solid #000; touch-action: none; }
/* The photo to blur: tall enough to aim at a face, never wider than the screen. */
img.photo-edit { display: block; max-height: 70vh; width: auto; height: auto; border: 1px solid #000; cursor: crosshair; }
input[type=file] { min-height: 44px; }
/* Headings and messages take focus so screen readers read them out. They are not things to tap, so no box round them. */
[tabindex="-1"]:focus { outline: none; }