/* Phone layout for /community/topic/<id> forum topics (loaded at (max-width: 760px)). */
/* What changes on a phone: tighter page padding, a smaller headline,
   wrapping tappable breadcrumbs, the post body at full reading size,
   full-width 48px actions, and the "more topics" chips as full-width
   rows. Shared rules come from roads._head + request_pages.STYLE +
   forum.TOPIC_STYLE; this sheet loads after all three. */

/* ---------- page frame ---------- */
/* The desktop wrap's 48px top / 80px bottom is mostly air on a phone. */
.road-wrap { padding: 20px 16px 40px; }
.road-wrap h1 { font-size: 1.85rem; line-height: 1.12; margin: 8px 0 10px; overflow-wrap: anywhere; }
.road-wrap h2 { font-size: 1.15rem; line-height: 1.25; margin: 28px 0 12px; overflow-wrap: anywhere; }

/* Breadcrumbs: long names wrap instead of running off the edge; inline
   padding grows each link's tap area without spreading wrapped lines. */
.crumbs { font-size: .78rem; line-height: 1.7; letter-spacing: .02em; overflow-wrap: anywhere; margin-bottom: 4px; }
.crumbs a { padding: 10px 0; }

/* Meta line: mono at desktop tracking wraps into ragged lines; tighten. */
.road-meta { font-size: .8rem; letter-spacing: .02em; line-height: 1.6; margin-bottom: 18px; }
.pill { font-size: .75rem; padding: 3px 9px; }

/* ---------- actions ---------- */
.cta-row { flex-direction: column; gap: 10px; margin: 22px 0 8px; }
.cta-row .btn { width: 100%; min-height: 48px; font-size: 1rem; white-space: normal; text-align: center; }

/* ---------- thread ---------- */
.reply { padding: 12px 14px; }
.reply .who { font-size: .8rem; line-height: 1.5; }
.reply p { font-size: .98rem; line-height: 1.55; }
.req-more { font-size: .8rem; line-height: 1.55; color: var(--gravel); }
.req-more a { display: inline-block; padding: 6px 0; }

/* "More in this region" links: full-width rows, one thumb each, instead
   of small mono chips that wrap unevenly. */
.dir-jump { flex-direction: column; gap: 8px; margin-top: 26px; }
.dir-jump a {
  display: flex; align-items: center; min-height: 46px; padding: 10px 16px;
  border-radius: 10px; background: var(--basalt); font-size: .84rem;
  color: var(--chalk); overflow-wrap: anywhere;
}

/* The footer's 96px desktop gap is a dead screen on a phone. */
.foot { margin-top: 40px; padding: 28px 0 calc(36px + env(safe-area-inset-bottom)); }
.foot .legal { font-size: .8rem; color: var(--gravel); }
.foot a { display: inline-block; padding: 4px 0; }

@media (max-width: 370px) {
  .road-wrap h1 { font-size: 1.6rem; }
}

/* ---------- topic body ---------- */
.topic-body { font-size: 1.02rem; line-height: 1.6; margin: 14px 0 6px; }