/* Shared responsive layer for all pages (desktop + mobile). Loaded after each page's own styles. */
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
pre, .cmd, .cmds { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table { max-width: 100%; }
.q-body table { display: block; overflow-x: auto; }
.q-title, .q-body, .q-body p, .q-body li { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  body > header, header[style] { padding: .6rem 12px !important; gap: 8px !important; }
  header h1 { flex: 1 1 100% !important; order: 5; font-size: 15px !important; line-height: 1.3; }
  .stats { grid-template-columns: repeat(2, 1fr) !important; }
  .container { padding: 1rem 12px !important; }
  .q-header { flex-wrap: wrap; gap: 8px 10px; padding: 14px 12px; min-height: 48px; }
  .q-title { flex: 1 1 calc(100% - 80px); min-width: 0; font-size: 15px; }
  .q-right { flex: 1 0 100%; justify-content: space-between; padding-left: 38px; }
  .chevron { font-size: 14px; padding: 10px; margin: -10px; }
  .chip, .filter-chip, button, select { min-height: 40px; }
  input[type="text"], input[type="search"], textarea, select { font-size: 16px; } /* stops iOS zoom on focus */
  .q-body { padding-left: 12px; padding-right: 12px; }
  .sp-block, .docs-block, .dg-block { margin-left: 0; margin-right: 0; }
  body { word-break: normal; }
}
@media (min-width: 1100px) {
  .q-body { max-width: 980px; }
}

/* ---- mobile browser friendliness (phones / touch) ---- */
.mnav{display:none}
@media (max-width: 640px) {
  header[style] { position: static !important; }           /* free vertical space; guide header no longer sticks */
  header[style] button.ekn-btn { display: none; }          /* Print is pointless on phones; PDF stays */
  header[style] .ekn-btn, header[style] .portal-link, header[style] .dm-btn, header[style] select { min-height: 40px; display: inline-flex; align-items: center; }
  .q-card { scroll-margin-top: 12px; }
  body { padding-bottom: 72px; }                            /* room for the floating Voice button */
  .docs-block a, .dg-block a { display: inline-block; padding: 7px 0; }
  .mnav { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 10px 12px; background: var(--bg, #f4f4ee); border-bottom: 1px solid rgba(127,127,127,.2); scrollbar-width: none; }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 99px; border: 1px solid #1D9E75; color: #0F6E56; font-weight: 600; font-size: 14px; text-decoration: none; background: #fff; white-space: nowrap; }
  body.dark .mnav a { background: #16241f; color: #4dd4a8; border-color: #4dd4a8; }
  .back, .open { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (pointer: coarse) {
  .sp-btn { min-height: 40px; padding: 6px 14px; }
  .chip { min-height: 40px; display: inline-flex; align-items: center; }
}
/* fallback fonts for the older guides that reference these variables without defining them */
:where(:root) { --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }