/* Phone readability for the app pages (Sean, Oct 30: "it has to be optimized
   for readability"): solid background behind text, the reading card full
   width, larger type and looser lines, room for the Size bar. Loaded only on
   public pages (pwaHead in build.mjs), never on the lab kiosk. */
@media (max-width: 700px) {
  .board, .bb-board { display: none !important; }
  body { background: #1F3D2B; }
  body.read main { padding: 4rem 0 7rem; gap: 14px; }
  body.read .rkick { padding: 0 16px; font-size: .78rem; }
  body.read .rtext, body.read .rtry { border-left: 0; border-right: 0; box-shadow: none; padding: 1.1rem 16px 1.3rem; font-size: 1.12rem; line-height: 1.65; }
  body.read .text-title { font-size: 1.55rem; line-height: 1.1; }
  body.read .rtext h3 { font-size: 1.2rem; }
  body.read .rtext p { margin: 0 0 1rem; }
  body.read pre, body.read .code { font-size: .9rem; overflow-x: auto; }
  .ti-choice { min-height: 44px; }
  .bb { padding-bottom: 6rem !important; }
  .bb-intro { font-size: 1rem; line-height: 1.55; }
  .code-row { list-style: none; }
}
/* My claim codes */
.codes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.code-row { background: var(--paper, #F3EEE2); color: #1B1B1B; border: 3px solid #1B1B1B; padding: .8rem 1rem; }
.code-what { margin: 0 0 .3rem; font-size: .9rem; }
.code-val { margin: 0 0 .6rem; font: 600 1.35rem/1.2 "IBM Plex Mono", ui-monospace, monospace; letter-spacing: .04em; overflow-wrap: anywhere; }
/* The Close/Overview button scrolls away with the page top instead of floating over the text. */
@media (max-width: 700px) {
  body.read .bench-back { position: absolute; }
}