/* ─────────────────────────────────────────────────────────────
 * Panchang Timeline Chart — responsive overlay
 *
 * The React bundle renders the Tithi/Nakshatra/Yoga/Karana/Weekday
 * timeline as an SVG with viewBox "0 0 900 …" inside a wrapper
 * div.overflow-x-auto. The bundle hard-codes the SVG's inline style
 * to width:100% and min-width:360px, which means on a ~360px phone
 * the entire 900-unit viewBox gets crushed into ~360 CSS pixels —
 * the 8/9pt SVG text shrinks to ~3px tall and becomes unreadable.
 *
 * Fix: keep the SVG at a legible minimum width on small screens so
 * the wrapper's existing horizontal-scroll behaviour kicks in. We
 * use !important to override the React inline style attribute.
 * ───────────────────────────────────────────────────────────── */

/* Phones — give the chart room to breathe and let users swipe. */
@media (max-width: 768px) {
  div.overflow-x-auto > svg[viewBox^="0 0 900"] {
    min-width: 760px !important;
    width: 760px !important;
    height: auto !important;
  }

  /* Make the scroll affordance more obvious on touch devices. */
  div.overflow-x-auto:has(> svg[viewBox^="0 0 900"]) {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto !important;
    scrollbar-width: thin;
    /* soft right-edge fade to hint at scrollable content */
    -webkit-mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - 24px),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      black 0,
      black calc(100% - 24px),
      transparent 100%
    );
  }
}

/* Tablets — slightly more compact chart but still scrollable if tight. */
@media (min-width: 769px) and (max-width: 1024px) {
  div.overflow-x-auto > svg[viewBox^="0 0 900"] {
    min-width: 720px !important;
  }
}

/* Very narrow phones (<= 380px) — push the floor a bit higher
 * so axis labels do not collide. */
@media (max-width: 380px) {
  div.overflow-x-auto > svg[viewBox^="0 0 900"] {
    min-width: 820px !important;
    width: 820px !important;
  }
}