/* Small-screen reading controls share the same publication identity. */
.mobile-dock { display: none; }
@media (max-width: 700px) {
 body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
 .header, main, .footer {
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
 }
 .mobile-dock {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  position: fixed; inset: auto 0 0; z-index: 30;
  background: var(--paper); color: var(--muted); border-top: 1px solid var(--line);
  padding: 5px max(12px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px, env(safe-area-inset-left));
 }
 .mobile-dock a {
  min-height: 62px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  font: 500 12px/1.2 var(--font-body); text-decoration: none;
  border-radius: 6px; color: inherit;
 }
 .mobile-dock svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
 .mobile-dock a[aria-current] { color: var(--accent); background: var(--specimen); }
 .mobile-dock a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
 /* Keep the hit area stable across pointerdown → blur → pointerup. The native
    keyboard already covers the layout viewport; a dialog uses its own controls. */
 body:has(dialog[open]) .mobile-dock { display: none; }
 input, select, textarea { font-size: 16px !important; }
 button, .button { min-height: 44px; }
 .reader > .section-nav {
  display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 0;
  padding-block: 4px; scrollbar-width: thin; overscroll-behavior-x: contain;
 }
 .reader > .section-nav a { flex: 0 0 auto; min-height: 44px; padding: 12px 10px; white-space: nowrap; }
 .reader > .section-nav a:first-child { padding-left: 0; }
 .toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); }
 dialog[data-word-dialog] {
  width: 100%; max-width: none; max-height: calc(100dvh - 32px);
  margin: auto 0 0; padding: 0 20px max(24px, env(safe-area-inset-bottom));
  border-radius: 14px 14px 0 0; border: 1px solid var(--line);
 }
 .dialog-top { position: sticky; top: 0; z-index: 2; background: var(--paper); padding-block: 16px; }
 .dialog-top button { min-width: 60px; }
 .header nav.open { max-height: calc(100dvh - 180px); overflow-y: auto; }
}