/* Mobile blog tweaks — applied to all 148 blog pages on viewports <=768px.
   1. Tables: horizontal scroll + fade-edge hint + word-break for long cell content.
   2. SVG graphics: break out of the .W + .chart-container double padding so
      charts use nearly the full mobile width and small labels stay readable. */
@media (max-width: 768px) {
  /* ===== Tables ===== */
  .table-scorecard {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* True right-edge fade hint via mask-image.
       The inset box-shadow previously used here got buried under scrolling
       row content. mask-image fades the element itself (border + cells)
       to transparent over the rightmost 40px, so the eye sees a fade
       regardless of the row's background colour. */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 calc(100% - 40px), rgba(0,0,0,0.15) 100%);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  /* Force a usable minimum so cells don't squeeze into illegible widths */
  .table-scorecard table {
    min-width: 480px;
  }
  /* Allow truly unbreakable strings (URLs, long compound tokens) to wrap if
     they would otherwise blow out the cell, but DON'T split normal words
     mid-letter — `overflow-wrap: anywhere` was breaking "Parameter" into
     "Param / eter" because it lets the browser pick any character as a break
     point. `break-word` only kicks in when a word can't fit at all, so common
     words stay intact and the cell/column auto-widens to fit. */
  .table-scorecard td,
  .table-scorecard th {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* ===== SVG graphics: full-width mobile treatment =====
     .W applies padding:0 24px to the page wrapper, and .chart-container adds
     padding:28px inside that — combined ~52px on each side cramps the chart
     on a 360px viewport. Break out with negative margins so the chart sits
     ~4px from the screen edge, and reduce the inner padding to 10px. */
  .article-content .chart-container {
    margin-left: -20px;
    margin-right: -20px;
    padding: 18px 10px;
    border-radius: 8px;
  }
  /* Legacy ad-hoc wrappers used in a few blogs:
     <div style="max-width:720px;margin:2.5rem auto;"><svg ...></div>
     Audit confirmed all 14 inline-styled max-width divs in /blog wrap SVG
     content (some preceded by an h3/h4 title), so no :has() filter needed —
     keeping the selector simple also avoids :has() support gaps on older
     Android Chrome. */
  .article-content div[style*="max-width"] {
    margin-left: -20px !important;
    margin-right: -20px !important;
    max-width: none !important;
  }
  /* Backstop: any SVG in the article body scales to its container's width. */
  .article-content svg {
    max-width: 100%;
    height: auto;
  }
}