/* Mobile floor (SC-6340): every tap target >= 44x44 CSS px and >= 8px apart on phones,
   down to a 360px Galaxy S23. Generic rule: ~/.claude/skills/frontend-dev "Mobile floor".
   Checked by scripts/mobile-sweep.mjs (ui-sweep touch-target / touch-crowded). */
@media (max-width: 1023px), (pointer: coarse) {
  header nav a, footer a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
  }
  header nav > div { gap: .5rem !important; }
  footer span.flex, footer > div { flex-wrap: wrap; column-gap: .75rem !important; row-gap: .5rem !important; }
}

/* Doc pages on phones (SC-6340): stacked table cells keep their column name, code
   wraps instead of clipping, footer links sit in a tidy grid. */
@media (max-width: 640px) {
  .doc td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 600; color: #16161a; }
  .doc pre, .doc pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
  footer .footer-links, footer span.flex { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: start; }
  footer .footer-links > span { grid-column: 1 / -1; }
}
/* Wide screens: keep the docs contents visible beside the article. */
@media (min-width: 1280px) {
  .doc > nav.toc { position: fixed; top: 6rem; left: calc(50% - 24rem - 16rem); width: 14rem; max-height: calc(100vh - 8rem); overflow: auto; margin-top: 0; }
}
/* Docs contents: each entry is a full-height tap target below desktop (SC-6340). */
@media (max-width: 1023px) {
  .doc > nav.toc a { display: flex; align-items: center; min-height: 44px; }
  .doc > nav.toc li { padding-block: 4px; }
}

/* Readable line length on doc pages at every width (SC-6340 web-qa). */
.doc p, .doc li { max-width: 68ch; }
/* Docs contents on tablets: two columns, not one tall card (SC-6340 web-qa). */
@media (min-width: 640px) and (max-width: 1279px) {
  .doc > nav.toc ol, .doc > nav.toc ul { columns: 2; column-gap: 2rem; }
  .doc > nav.toc li { break-inside: avoid; }
}

/* Reading pages (about, contact, legal): ~65 characters a line, slightly larger on desktop (SC-6340 web-qa). */
.legal p, .legal li { max-width: 65ch; }
@media (min-width: 1024px) { .legal p, .legal li { font-size: 1.0625rem; } }