/* UpOrbit shared reading-page fixes (blog, compare, topics). Loaded after each page's inline styles.
   Goal: on a 390px phone the reader reaches the answer on the first screen. */

/* Grid children can't shrink below their content by default; one wide table stretched whole pages sideways. */
.lay > *, .aw, article { min-width: 0; }
article table, .aw table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Medical disclaimer box (marked .med-disc): same words, less height. */
.med-disc { padding: 14px 16px !important; line-height: 1.55 !important; }
.med-disc > div:first-child { margin-bottom: 4px !important; font-size: .82rem !important; }
.med-disc p + p { margin-top: 4px !important; }

/* Short-answer boxes: one consistent, quotable block. */
.short-answer { margin: 4px 0 24px; padding: 16px 18px; border-radius: 12px; background: rgba(74,234,170,.06); border: 1px solid rgba(74,234,170,.22); color: var(--t1, #E8ECF4); font-size: .98rem; line-height: 1.6; }
.short-answer > strong:first-child { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mint, #4AEAAA); margin-bottom: 6px; }
.short-answer p { margin: 0 0 8px; }
.short-answer p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  /* The extension promo competes with the answer on reading pages; it stays on the homepage and in the nav. */
  body > .sb-top { display: none; }
  /* Decorative article artwork pushes the answer below the first screen on phones. */
  .aw img[src^="/images/blog/"][width="1200"], article img[src^="/images/blog/"][width="1200"] { display: none; }
  .bc { margin-bottom: 12px !important; }
  h1 { margin-bottom: 12px !important; }
  .med-disc { font-size: .74rem !important; margin-bottom: 18px !important; }
}