/* Mobile horizontal containment for body content. 20260905f
 *
 * The defect this fixes: about twenty per-tool stylesheets pin their article tables to a
 * desktop `min-width` (520–590px) and add `white-space: nowrap` to the cells, then park the
 * table inside an `overflow-x: auto` wrapper. On a desktop that wrapper shows a scrollbar.
 * On a phone the scrollbar is invisible, so the table just stops at the card's inner edge
 * with no right border and the row runs off — it reads as the body bursting out of its
 * container. Measured examples at 390px: school-calculator +238px, precision-marathon
 * +236px, debt-repayment-planner +228px, compound +226px, blood-pressure-classifier
 * +208px, candela-lux-converter +168px, privacy-policy +161px.
 *
 * Below the mobile breakpoint we release the desktop width instead: let the table shrink to
 * its column and let the cells wrap. `overflow-x: auto` stays on the wrappers as a fallback
 * for genuinely unbreakable content, so nothing becomes unreachable.
 *
 * `!important` is deliberate and scoped to the mobile media query only. The widths come
 * from many independent per-tool sheets that each declare their own `min-width` and
 * `white-space`, and a containment rule has to win over all of them without those files
 * being edited one by one.
 */

@media (max-width: 640px) {

  /* Wrappers keep their scroll fallback but may never exceed their column. */
  .entry-content :is(
    [class*="table-wrap"],
    [class*="table-wrapper"],
    [class*="table-container"],
    [class*="table-scroll"],
    [class*="example-wrap"]
  ) {
    max-width: 100%;
    scrollbar-width: thin;
  }

  /* Release the desktop pin so the table can fit the phone column. */
  .entry-content table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100%;
    table-layout: auto;
  }

  /* `keep-all` protects Korean and Japanese word boundaries; `anywhere` is the escape hatch
     for long unbreakable tokens such as URLs and formula strings. */
  .entry-content table :is(th, td) {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    hyphens: none;
  }

  /* A handful of tables are genuinely too wide for a phone even after wrapping — the
     privacy policy transfer table has twelve columns. Those must stay scrollable, but the
     scroll has to look like a scroll. Without this the region ends mid-cell with no right
     edge, which is exactly what reads as the body bursting out of its container. */
  .entry-content :is(
    [class*="table-wrap"],
    [class*="table-wrapper"],
    [class*="table-container"],
    [class*="table-scroll"],
    [class*="example-wrap"],
    table,
    pre,
    code
  ) {
    scrollbar-width: thin;
    scrollbar-color: rgba(90, 74, 48, .45) rgba(90, 74, 48, .12);
  }

  .entry-content :is([class*="table-wrap"], [class*="table-wrapper"], [class*="table-container"], [class*="table-scroll"], [class*="example-wrap"], table, pre, code)::-webkit-scrollbar {
    -webkit-appearance: none;
    height: 6px;
  }

  .entry-content :is([class*="table-wrap"], [class*="table-wrapper"], [class*="table-container"], [class*="table-scroll"], [class*="example-wrap"], table, pre, code)::-webkit-scrollbar-track {
    background: rgba(90, 74, 48, .12);
  }

  .entry-content :is([class*="table-wrap"], [class*="table-wrapper"], [class*="table-container"], [class*="table-scroll"], [class*="example-wrap"], table, pre, code)::-webkit-scrollbar-thumb {
    background: rgba(90, 74, 48, .45);
    border-radius: 3px;
  }

  /* Legacy tool shells that pin a fixed pixel width on the inner container and then add
     horizontal margins, so the child ends up wider than the clipping wrapper by exactly the
     margin and gets cut. Measured at 390px: cat-age, cat-pregnancy and parrot-age +10px,
     optimal-sleep +6px. Releasing the pin lets the shell honour its own wrapper. */
  .entry-content :is(
    [class*="-calculator-container"],
    [class*="-calculator-wrapper"],
    [class*="-tool-container"],
    [class*="-tool-wrapper"]
  ) {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Grid and flex children default to `min-width: auto`, so one long child can refuse to
     shrink and push its track past the row. Measured: es/uppercase-converter input and
     result sections +3.4px each at 360px. */
  .entry-content .main-grid > * {
    min-width: 0;
  }

  /* A heading pinned to one line inside a clipping panel loses its tail on a narrow phone.
     Measured: es/cat-age-calculator `.section-title` +4px at 360px, where the Spanish
     heading is longer than the Korean original the width was designed around. */
  .entry-content :is(h1, h2, h3, h4, h5, h6) {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  /* Fixed-width media inside the body column. A `width` attribute on canvas/img is only a
     presentational hint, so no `!important` is needed and page CSS can still override. */
  .entry-content :is(img, canvas, video) { max-width: 100%; }
  .entry-content canvas { height: auto; }
  .entry-content :is(pre, code) { max-width: 100%; overflow-wrap: anywhere; }

  /* Ad surfaces are exempt. Their size is contractual and must not be reshaped here. */
  .entry-content :is(.tn-ad, .tn-ad__box, .tn-side-ad, .adsbygoogle, ins, .roberin-qa-ad-placeholder) :is(img, canvas, video, iframe),
  .entry-content :is(.adsbygoogle, ins.adsbygoogle) {
    max-width: none;
    height: auto;
  }
}