/* Builder's guide, phones only. A reading page: one block per heading,
   type at the phone floor, code wraps inside its block, tables become vertical row lists. */
@media (max-width:899px) {
  /* heading */
  main .build-heading { padding:40px var(--m-pad) 36px !important; }
  main .build-meta { flex-direction:column; align-items:flex-start; gap:8px; margin-bottom:24px; font:500 15px/1.4 PlexM,Plex,sans-serif; color:var(--m-ink); }
  main .build-logo .veriker-wordmark { height:20px; }
  main .build-heading h1 { font:600 clamp(36px,10vw,44px)/1.04 PlexM,Plex,sans-serif !important; letter-spacing:-.04em; text-wrap:balance; }
  main .build-heading .lead { font:600 20px/1.35 PlexM,Plex,sans-serif !important; color:var(--m-ink) !important; max-width:none; text-wrap:pretty; }

  /* blocks */
  main .build-body, main .build-appendix { padding:0 var(--m-pad); margin-top:0; }
  .m-build .m-frame { padding:40px 0 32px; border-top:1px solid var(--line); }
  .m-build .build-heading + .build-body > .m-frame:first-child { border-top:0; }
  .build-cover { padding-bottom:0; }
  .m-build .build-body h2, .m-build .build-appendix h2 { margin:0 0 18px; font:600 30px/1.06 PlexM,Plex,sans-serif; letter-spacing:-.03em; color:var(--m-ink); text-wrap:balance; }
  .m-build h3 { font-family:PlexM,Plex,sans-serif; font-weight:600; color:var(--m-ink); text-wrap:balance; }
  .m-build .build-appendix .m-frame > h3:first-child { margin:0 0 14px; font-size:20px; line-height:1.2; }
  .m-build .build-appendix #layout { margin-top:28px; }
  .build-body p, .build-appendix p, .build-body li, .build-body dd, .build-appendix dd { font-size:16px; line-height:1.5; color:var(--m-ink); text-wrap:pretty; }
  .build-body code, .build-appendix code { font-size:14px; }

  /* roles, pairs, checklists */
  .build-roles-list { gap:0; }
  .build-roles-list > div { grid-template-columns:1fr; gap:4px; padding:14px 0; }
  .build-roles-list dt { font:600 20px/1.25 PlexM,Plex,sans-serif; }
  .build-checklist li { padding:12px 0; }

  /* five steps and three tracks: read top to bottom */
  .build-step-list > li { padding:18px 0 20px; }
  .build-step-list h3 { font-size:19px; line-height:1.2; }
  .build-tracks-grid { grid-template-columns:1fr; gap:24px; }
  .build-track h3 { font-size:19px; }
  .build-track li { padding:8px 0; font-size:16px; line-height:1.45; }
  .build-track code { font-size:14px; }

  /* code blocks: wrap inside the block, never widen the page */
  .build-command, .build-tree { white-space:pre-wrap; overflow-wrap:anywhere; overflow-x:auto;
    padding:12px 14px; background:#f3f6f4; border:0; border-left:2px solid var(--m-ink); font-size:14px; line-height:1.5; }
  .build-tree { margin:0 0 16px; white-space:pre; }

  /* appendix tables as row lists */
  .m-hidden { display:none !important; }
  .m-rows { list-style:none; margin:8px 0 0; padding:0; border-top:2px solid var(--m-ink); }
  .m-rows li { display:flex; flex-direction:column; justify-content:center; gap:4px; min-height:72px; padding:12px 0; box-sizing:border-box; border-bottom:1px solid var(--line); }
  .m-row-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; min-width:0; }
  .m-row-top code { font:400 15px/1.35 PlexMono,monospace; overflow-wrap:anywhere; min-width:0; }
  .m-row-tag { flex:none; font:500 15px/1.35 PlexM,Plex,sans-serif; color:var(--m-ink); }
  .m-row-what { font:400 17px/1.4 PlexM,Plex,sans-serif; color:var(--m-ink); }

  /* flags */
  .build-flags > div { grid-template-columns:1fr; gap:4px; padding:12px 0; }
  .build-flags dt { font-size:14px; }
  .build-flags dd { font-size:16px; line-height:1.45; }
  .build-colophon { margin-top:20px; }
}

/* iPhone SE class: 48px makes "writing record." wider than the column. */
@media (max-width:340px) { main .build-heading h1 { font-size:36px !important; } }