/* Cross-cutting shell: bottom nav, header fit, long lists, terms, notices, loading. */
.ux-bottom-nav { display: none; }
@media (max-width: 700px) {
  .ux-bottom-nav {
    position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .97);
    border-top: 1px solid var(--ux-line); backdrop-filter: blur(8px);
  }
  .ux-bottom-nav a {
    display: grid; justify-items: center; gap: 2px; min-height: 52px; padding-top: 6px;
    color: var(--ux-muted); font-size: 12px; font-weight: 600; text-decoration: none;
  }
  .ux-bottom-nav a[aria-current="page"] { color: var(--ux-green); }
  .ux-bottom-nav a:focus-visible { outline: 3px solid var(--ux-blue); outline-offset: -3px; border-radius: 10px; }
  body.has-ux-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  /* 88: keep the header on one line */
  .topbar { flex-wrap: nowrap; gap: 8px; }
  .topbar .brand { flex: 0 0 auto; white-space: nowrap; }
  .topbar nav { flex-wrap: nowrap; gap: 4px; min-width: 0; }
  .topbar nav > * { white-space: nowrap; }
}

.ux-show-all { margin: 8px 0 16px; }

.ux-term { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.ux-term:focus-visible { outline: 2px solid var(--ux-blue); outline-offset: 2px; }
.ux-term-tip {
  display: inline-block; margin: 0 4px; padding: 2px 8px; border-radius: 8px;
  background: var(--ux-blue-soft); color: var(--ux-ink); font-size: 13px; line-height: 1.4;
}

.ux-error-notice {
  position: fixed; left: 16px; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto; padding: 10px 14px;
  border-radius: var(--ux-radius); background: var(--ux-ink); color: #fff; box-shadow: var(--ux-shadow);
}
.ux-error-notice .ux-btn { min-height: 36px; }
.ux-error-notice .ux-btn--quiet { color: #fff; }

/* 87: skeleton instead of bare "Loading…" text */
.wtc-loading, [data-feature-view] p[role="status"], .public-search-status:not(.public-search-none):not(.public-search-error) {
  position: relative; color: transparent !important; min-height: 72px;
}
.wtc-loading::after, [data-feature-view] p[role="status"]::after, .public-search-status:not(.public-search-none):not(.public-search-error)::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px;
  background: linear-gradient(90deg, #eee 25%, #f6f6f6 37%, #eee 63%); background-size: 400% 100%;
  animation: ux-shimmer 1.4s ease infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wtc-loading::after, [data-feature-view] p[role="status"]::after, .public-search-status::after { animation: none; }
}

/* 94: stronger contrast for muted text on cream */
.feature-note, .ux-note, .home-card small, .feature-list small, .feature-posts small { color: #4f5459; }

/* 82: 44px targets for standalone links and buttons on phones (inline text links exempt) */
@media (max-width: 700px) {
  .ux-related a, [class*="ux-related"] a, .public-property-actions button, .public-property-actions a,
  .feature-table td a, .public-where-this-fits a, .ux-search__item h3 a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* 88: on narrow phones show only the logo mark so header buttons never overlap the name */
@media (max-width: 420px) {
  .topbar .brand > span:not(.brand-mark) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar nav .lang-toggle, .topbar nav [data-action="report"] { padding: 0 8px; font-size: 13px; }
}