/* ============================================================================
   UptimeTracker — mobile hardening
   ----------------------------------------------------------------------------
   Loaded LAST so it can correct layout problems without rewriting components.

   The recurring failure in this product is not layout, it is CONTENT: monitor
   names, hostnames and URLs are arbitrary user input, and a single long
   unbroken string ("https://very-long-internal-hostname.example.internal/path")
   forces its container wider than the viewport. On a phone that produces a
   sideways-scrolling page where every section is misaligned.

   Two rules do most of the work:
     1. min-width:0 on flex/grid children. Flex and grid items default to
        min-width:auto, which refuses to shrink below their content. This is the
        single most common cause of mobile overflow and it is invisible on a
        desktop screen.
     2. overflow-wrap:anywhere on text that can contain user input.
   ========================================================================== */

/* ── Global safety net ───────────────────────────────────────────────────── */
html {
  -webkit-text-size-adjust: 100%;   /* stop iOS inflating text in landscape */
  text-size-adjust: 100%;
}
body {
  overflow-x: hidden;               /* nothing may scroll the page sideways */
}
*, *::before, *::after { box-sizing: border-box; }

/* Media and embeds can never exceed their container. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* ── The min-width:0 fix ─────────────────────────────────────────────────── */
/* Applied to the layout primitives actually used in this codebase rather than
   universally, so intentional fixed-width elements are left alone. */
.wrap > *, .lg-layout > *, .dash-grid > *, .stat-grid > *, .card-grid > *,
.sol-grid > *, .sol-options > *, .sol-steps > *, .sol-hub > *, .mon-scen > *,
.app-card > *, .lg-doc > *, .adm-card > *, .st-row > * {
  min-width: 0;
}

/* ── User-generated text must always wrap ────────────────────────────────── */
/* Monitor names, hostnames, URLs, incident titles, email addresses. */
.mn-url, .rj-err, .cl-detail, .ap-url, .lg-doc, .lgl-body, .lgl-com,
.st-row .nm, .st-row .nt, .incident-title, .monitor-name, .mon-name,
.sub-input, .breadcrumb, .lg-crumb,
[data-wrap], .wrap-any {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Monospace blocks (URLs, GUIDs, tokens) are the worst offenders. */
code, pre, kbd, samp, .mono, .mn-mono, .rj-mono, .cl-mono, .lgl-mono {
  overflow-wrap: anywhere;
  word-break: break-all;
}
pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Tables: scroll rather than stretch the page ─────────────────────────── */
.table-scroll, .lg-tablewrap, .adm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 720px) {
  /* Any table not already inside a scroll wrapper gets its own. Block display
     with auto overflow makes the table itself the scroll container, which keeps
     the rest of the page aligned. */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    white-space: nowrap;
  }
  /* Tables that are really key/value layouts should wrap instead of scroll. */
  table.kv, table.lg-table {
    display: table;
    white-space: normal;
  }
  table.lg-table td, table.lg-table th {
    overflow-wrap: anywhere;
  }
}

/* ── Forms: stop iOS zooming on focus ────────────────────────────────────── */
/* Safari zooms the viewport when a focused input has a font-size below 16px.
   That zoom is never undone, so the page is left oversized — one of the most
   common reasons a site "feels wrong" on iPhone. */
@media (max-width: 860px) {
  input, select, textarea {
    font-size: 16px !important;
    max-width: 100%;
  }
  input[type="checkbox"], input[type="radio"] {
    font-size: inherit !important;
    width: auto;
    min-width: 0;
  }
}

/* ── Touch targets ───────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  button, .btn, .btn-primary, .btn-ghost, .btn-primary-app, .btn-ghost-app,
  .btn-icon, a.btn, input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Icon-only controls need width as well as height. */
  .btn-icon { min-width: 44px; }
}

/* ── Layout collapse ─────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .sol-options, .sol-grid, .sol-steps, .sol-hub, .mon-scen,
  .stat-grid, .card-grid, .dash-grid, .lg-hub, .two-col {
    grid-template-columns: 1fr !important;
  }
  /* Filter bars and action rows stack rather than squeeze. */
  .mn-filters, .rj-filters, .cl-filters, .lgl-filters, .ap-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .mn-filters > *, .rj-filters > *, .cl-filters > *, .lgl-filters > * {
    width: 100%;
  }
  /* Summary tiles: two across is readable, six is not. */
  .mn-tiles, .ap-tiles, .rj-sum, .ch-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 460px) {
  .mn-tiles, .ap-tiles, .rj-sum, .ch-summary {
    grid-template-columns: 1fr !important;
  }
}

/* ── Headings must not overflow on narrow screens ────────────────────────── */
@media (max-width: 560px) {
  h1 { font-size: clamp(1.35rem, 7vw, 2rem); }
  h2 { font-size: clamp(1.1rem, 5.5vw, 1.5rem); }
  h3 { font-size: clamp(1rem, 4.8vw, 1.2rem); }
  h1, h2, h3, h4 { overflow-wrap: anywhere; }
}

/* ── Sticky elements are a liability on short screens ────────────────────── */
@media (max-width: 860px) {
  .lg-toc-inner { position: static; }
}

/* ── Respect reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}