/* Phone navigation: a bottom tab bar (Home, Explore, People, Topics, More) instead of a scrolling top strip. */
.rail-more, .rail-more-sheet { display: none; }

@media (max-width: 680px) {
  :root { --tab-h: calc(56px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); }
  .rail {
    inset: auto 0 0 0; height: var(--tab-h); padding: 0 6px var(--safe-bottom, env(safe-area-inset-bottom, 0px));
    border-bottom: 0; border-top: 1px solid var(--line); background: rgba(250, 250, 250, 0.96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .rail-nav { overflow: visible; justify-content: space-between; gap: 0; height: 56px; }
  .rail-action {
    position: relative; flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; height: 56px;
    margin: 0; padding: 0 2px; border-radius: 0; color: #737373; background: transparent;
  }
  .rail-action svg { width: 20px; height: 20px; }
  .rail-action > span { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; }
  .rail-action.active, .rail-action[aria-current='page'] { background: transparent; color: #181818; }
  .rail-action.active::before, .rail-action[aria-current='page']::before {
    content: ""; display: block; position: absolute; top: 0; left: 28%; right: 28%; height: 2px; border-radius: 0 0 2px 2px; background: #181818;
  }
  .rail-secondary { display: none; }
  .rail-more { display: flex; }

  /* The "More" sheet is a native popover: light-dismiss, Escape, and top-layer for free. */
  .rail-more-sheet {
    display: none; position: fixed; inset: auto 8px calc(var(--tab-h) + 8px) auto; margin: 0; padding: 6px; min-width: 210px;
    border: 1px solid var(--line); border-radius: 14px; background: #fff; color: #181818; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
    transform-origin: bottom right; opacity: 0; transform: scale(0.96) translateY(6px);
    transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out), display 160ms allow-discrete, overlay 160ms allow-discrete;
  }
  .rail-more-sheet:popover-open { display: grid; opacity: 1; transform: none; }
  @starting-style { .rail-more-sheet:popover-open { opacity: 0; transform: scale(0.96) translateY(6px); } }
  .rail-sheet-link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: 10px; color: inherit; text-decoration: none; font: 500 14px var(--font); }
  .rail-sheet-link svg { width: 18px; height: 18px; }
  .rail-sheet-link.active { background: #f0f0ee; }
  .rail-sheet-link:active { background: #e8e8e6; }

  /* Content sits above the bar instead of below a top strip. */
  .people-pane, .topics-pane, .main-pane { height: calc(100dvh - var(--tab-h)); margin-top: 0; }
  .app-shell .detail-pane.is-open { top: 0; bottom: var(--tab-h); }
  .toast.visible, .app-shell > .toast.visible { bottom: calc(var(--tab-h) + 12px); }

  /* Person header: name row, then a full-width action row, instead of buttons wrapping unevenly. */
  .ch-person-header { flex-wrap: wrap; row-gap: 8px; }
  .ch-person-header .main-person { flex: 1 1 100%; }
  .ch-person-header .main-header-actions { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  .ch-person-header .wb-open-link { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {
  .rail-more-sheet { transition: opacity 120ms linear; transform: none; }
}

/* Touch targets: Apple's minimum is 44pt. Applies on phones and on any coarse pointer. */
@media (max-width: 680px), (pointer: coarse) {
  .ch-examples-jump, .filter-chip, .icon-button, .tp-add-circle,
  .tp-starter-set button, .tp-starters button, .tp-first-card button, .tp-pane-footer .button { min-height: 44px; }
  .icon-button, .tp-add-circle { min-width: 44px; }
  .filter-chip { display: inline-flex; align-items: center; padding-inline: 14px; }
  summary { padding-block: 12px; }
  .cp-photo-credit p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
  .cp-photo-credit p a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 680px) {
  .cp-page-header .cp-button { white-space: nowrap; }
}