/* Narrow-screen adjustments that intentionally leave the desktop layout
   untouched. Keep these overrides last in the shared page head. */
@media (max-width: 700px) {
  /* Keep the daily note centered on narrow phones while reserving a small
     physical left breathing edge.  The width is viewport-based and the
     border-box calculation prevents the padding from pushing it off-screen
     in RTL layouts. */
  #today > .daily-tip-inner {
    box-sizing: border-box;
    width: 80vw !important;
    max-width: 80vw !important;
    margin-inline: auto !important;
    padding-left: 10% !important;
    padding-right: 0 !important;
    direction: rtl;
    justify-items: stretch;
  }
  #today > .daily-tip-inner .tip-of-day {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
  }

  #profileAnalyticsControls,
  #profileAnalyticsControls button {
    font-size: 12px !important;
  }

  /* The shared timeline sits below the panel stack. Give those dates the
     same metric colour and visual weight as the final visible chart. */
  .profile-analytics-date-axis {
    color: var(--date-axis-color) !important;
    /* This is regular DOM text now, rather than SVG text scaled from an
       820px viewBox; 15px preserves the former rendered size on phones. */
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  .profile-analytics-legend-label,
  .profile-analytics-legend-value {
    font-size: 1rem !important;
  }

  /* The floating upload action occupies the inline-end edge in the current
     RTL shell. Reserve its footprint without hardcoding physical left/right. */
  #todayDate {
    margin-inline-end: 48px;
  }

  /* Every post-side control uses the exact close-control surface. Active
     state remains visible through icon colour, without changing opacity. */
  .lightbox-close,
  .lightbox-social-actions .lightbox-controls .lightbox-image-action,
  .lightbox-social-actions .lightbox-controls .comment-control,
  .lightbox-social-actions .lightbox-controls .share-control,
  .lightbox-social-actions .lightbox-controls .like-control,
  .lightbox-social-actions .lightbox-controls .lightbox-post-action {
    opacity: 1 !important;
    border: 1px solid rgba(255, 255, 255, .55) !important;
    background: rgba(18, 42, 53, .5) !important;
    color: #fffdf9 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28) !important;
    backdrop-filter: blur(8px);
  }

  .lightbox-social-actions .lightbox-controls .like-control.active {
    background: rgba(18, 42, 53, .5) !important;
    color: #efaa5a !important;
  }
}