/* UBOA / Thanal — layout safety net.
 *
 * Loaded AFTER the compiled stylesheet. Purely additive: nothing here replaces
 * an existing rule, so it can be withdrawn by deleting one <link>. It is not
 * rebuilt by Tailwind, so it cannot be affected by content-scanning/purge.
 *
 * Fixes a class of bug rather than a page: content wider than the phone.
 */

/* 1 — The big one.
 *     Grid and flex items default to min-width:auto, so they refuse to shrink
 *     below their own content. One long unbroken circular title therefore makes
 *     its card wider than the screen and everything past the right edge is
 *     simply lost — even when the text inside already has truncate/ellipsis.
 *     Measured on the admin dashboard: a 597px anchor inside a 412px viewport. */
.grid > *,
.flex > * { min-width: 0; }

/* 2 — Nothing may be wider than the screen. */
img, svg, video, canvas, iframe, table { max-width: 100%; }
img, video { height: auto; }

/* 3 — Long unbroken strings (URLs, membership numbers, file names) wrap
 *     instead of widening the layout. */
body { overflow-wrap: break-word; }

/* 4 — A wide table scrolls inside its own box, never the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 5 — On a phone a one-line truncated heading is not readable, which is the
 *     actual complaint. Card and list titles get up to three lines, then
 *     ellipsis. Top-bar truncation is deliberately untouched so the app bar
 *     keeps a fixed height. */
@media (max-width: 640px) {
  .card .truncate,
  main li .truncate {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}