/* Shared phone ergonomics. Use real layout boxes, never overlapping pseudo hit areas. */
.phone { --page-gutter: 18px; --page-top-gap: 20px; }
/* Account cards no longer have a cover image to supply their top inset. */
.phone .screen-content:has(> .cl-account-entry) { padding: var(--page-top-gap) var(--page-gutter) 24px; }
.phone.phone :is(button, [role="button"], select, textarea, summary),
.phone.phone input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 44px;
  min-width: 44px;
}
.phone.phone :is(.bottom-nav a, .ce-tabs button, .phone-nav button) {
  min-height: 44px;
  min-width: 44px;
}
.phone.phone summary { align-content: center; }
.phone.phone :is(.x-check, .cweek label, label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
  min-height: 44px;
}
.phone.phone :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid #799b46;
  outline-offset: 2px;
}

/* The two running shortcuts have a full row each can share comfortably at 320px. */
.phone .t-run-top { display: block; }
.phone .t-run-top b { display: block; font-size: 16px; }
.phone .t-run-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 0;
}
.phone.phone .t-run-shortcuts button {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  border: 1px solid #a8c39859;
  border-radius: 12px;
  background: #ffffff0d;
  color: #e6efdc;
  font-size: 12px;
  line-height: 1.5;
  white-space: normal;
}
.phone .t-run-shortcuts svg { width: 16px; height: 16px; flex-shrink: 0; }
.phone .t-run-shortcuts button:focus-visible { outline-color: #d6edab; }
.phone .t-run-goals { gap: 8px; }
.phone .t-run-goals button { font-size: 12px; white-space: normal; }
.phone .t-run-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding-top: 12px;
}
.phone .t-run-options button { justify-content: center; padding: 6px 0; font-size: 11px; }
.phone .t-run-options svg { flex-shrink: 0; }
.phone .t-sport-location { gap: 12px; }
/* The 44px location/history row already separates these two cards. */
.phone .cl-entry:has(+ .t-sport-location) { margin-bottom: 0; }
.phone .cl-entry + .t-sport-location { padding: 0; }

/* Header icons, chat input and navigation remain distinct even on narrow phones. */
.phone .s-header { grid-template-columns: 96px minmax(0, 1fr) 96px; column-gap: 0; }
.phone .s-header h1 { min-width: 0; text-align: center; }
.phone .s-header > div { display: flex; align-items: center; gap: 8px; }
.phone .s-header > div:last-child { justify-content: flex-end; }
.phone .s-header :is(button, a) { flex-shrink: 0; white-space: nowrap; }
/* Two-character auxiliary labels still fit the 44px target when text is enlarged. */
.phone .s-header .xp-icon { padding-inline: 0; }
.phone.phone .s-header .s-top-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 44px;
  padding: 8px 14px;
  line-height: 1.35;
}
.phone .s-icon { flex-shrink: 0; }
.phone .s-input-row { gap: 8px; align-items: flex-end; }
.phone .s-input-row textarea { min-width: 0; }
.phone .s-input-row .s-icon { width: 44px; height: 44px; }
.phone .s-avatar { align-self: flex-start; }
.phone .bottom-nav { gap: 8px; }
.phone .bottom-nav a { justify-content: center; }
.phone :is(.s-search, .u-search, .ce-search) { padding-block: 0; min-height: 48px; }

/* Independent secondary actions must not rely on tightly packed text alone. */
/* Wrap action groups at each label's natural width, not at the 44px icon minimum. */
.phone.phone :is(.cl-actions, .pi-actions, .cactions, .tp-share-nav) { flex-wrap: wrap; }
.phone.phone :is(.cl-actions, .pi-actions, .cactions, .tp-share-nav) > :is(button, a) {
  flex: 1 1 max-content;
  width: auto;
  min-width: min(100%, 100px);
  max-width: 100%;
  height: auto;
  white-space: normal;
}
.phone.phone .cl-actions > .cl-primary { flex-grow: 2; }
/* Dialogs mount under body, outside .cl-phone; keep their confirmation button visible. */
.cl-dialog { --cl-accent: #235441; --cl-tint: #eef3e8; --cl-ink: #203a30; }
.phone .s-segments { gap: 12px; }
.phone :is(.c-feed-tabs, .s-segments) > button { padding-inline: 6px; }
.phone :is(.options, .u-chips, .id-tabs, .c-topics, .cactions, .ce-quick-pair) { gap: 8px; }
.phone :is(.x-between, .c-section-title, .ci-section-head, .t-gel-title, .t-discover-head) { gap: 12px; }
.phone .c-detail-dock { gap: 8px; }
.phone .c-detail-dock > button { justify-content: center; }
.phone .c-detail-dock .c-comment-open { min-width: 0; }
.phone .c-note-person { gap: 8px; padding: 4px 8px 8px; }
.phone .c-mini-person { overflow: hidden; }
.phone .c-mini-person span { min-width: 0; }
.phone .c-note-like { flex-shrink: 0; justify-content: center; }
.phone .c-note-like svg { width: 17px; height: 17px; flex-shrink: 0; }
.phone .r-card .r-faces { height: auto; min-height: 44px; gap: 4px; margin-bottom: 8px; }
.phone .r-card .r-avatar { flex-shrink: 0; }
.phone .r-names { gap: 8px; }
.phone .s-post-meta { gap: 8px; flex-wrap: wrap; align-items: center; }
.phone .cweek { gap: 8px; }

/* Local route-library cards keep open/save as separate hit areas too. */
.phone .pi-route-tile { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; align-items: center; }
.phone .pi-route-open { min-width: 0; padding-right: 0; }
.phone .pi-save { position: static; width: 48px; justify-content: center; }

/* Preserve browsing room: grow hit boxes, not the whitespace around each feed control. */
.phone .c-feed-tabs { padding-block: 4px 8px; }
.phone .c-topics { padding-block: 0 8px; }
.phone .t-discover-head { padding-bottom: 0; }
.phone .cf-tools { margin-top: 8px; }
.phone .cf-explain { margin-bottom: 8px; }

/* Body-level overlays are outside .phone; keep their controls equally reachable. */
.tp-share-modal :is(button, input, textarea, summary) { min-height: 44px; min-width: 44px; }
.tp-share-modal summary { align-content: center; }

@media (max-width: 360px) {
  .phone { --page-gutter: 16px; --page-top-gap: 16px; }
  .phone .t-run-hero { padding: 16px; }
  .phone .t-run-options button { flex-wrap: wrap; column-gap: 4px; }
  .phone .c-note-person { flex-wrap: wrap; }
  .phone .c-mini-person { flex-basis: 100%; }
  .phone .c-note-like { margin-left: auto; }
}