/* Deliberately plain. Enough to be readable on a phone, nothing more. */
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width: 42rem;
  margin: 0 auto;
  padding: 1rem 1rem 4rem;
  color: #111;
  background: #fff;
}
nav { font-size: 0.9rem; margin-bottom: 1rem; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.1rem; margin-top: 2rem; }
h3 { font-size: 1rem; margin: 0 0 0.3rem; }
a { color: #06c; }
code { background: #eee; padding: 0 0.2em; }

.prompt { font-size: 2rem; margin: 0.5rem 0; }
.answer { font-size: 1.5rem; width: 100%; padding: 0.4rem; box-sizing: border-box; }
input, textarea, select { font: inherit; max-width: 100%; box-sizing: border-box; }
input[type=text], input:not([type]), textarea { width: 22rem; padding: 0.3rem; }
button, .button {
  font: inherit; padding: 0.4rem 0.9rem; cursor: pointer;
  border: 1px solid #111; background: #fff; color: #111;
  text-decoration: none; display: inline-block; margin: 0.2rem 0.2rem 0.2rem 0;
}
button:hover, .button:hover { background: #111; color: #fff; }

table { border-collapse: collapse; width: 100%; margin: 0.5rem 0; }
th, td { border-bottom: 1px solid #ddd; padding: 0.35rem 0.4rem; text-align: left;
         vertical-align: top; font-size: 0.95rem; }
th { font-weight: 600; }

.muted { color: #666; font-size: 0.9rem; }
.good { color: #060; }
.bad { color: #a00; }
.near { color: #a60; }
tr.good td:first-child, tr.bad td:first-child, tr.near td:first-child {
  border-left: 3px solid currentColor; padding-left: 0.4rem;
}
.owed {
  border: 2px solid #a00; color: #a00; padding: 0.6rem; margin: 0 0 1rem;
}
.card { border: 1px solid #ccc; padding: 0.6rem 0.8rem; margin: 0.6rem 0; }
.card.bad { border-color: #a00; }
.sentences { margin: 0.3rem 0; padding-left: 1.2rem; }
.sentences li { margin: 0.2rem 0; }
img.thumb { max-width: 8rem; max-height: 8rem; display: block; margin: 0.4rem 0; }
img.photo { max-width: 100%; max-height: 16rem; display: block; margin: 0.6rem 0; }
label { display: inline-block; }

.cues { border-left: 3px solid #ccc; padding-left: 0.7rem; margin: 0.8rem 0; }
.cues img.photo { max-height: 11rem; }