/*
 * Shared phone/tablet layer for the standalone static pages in client/public:
 * privacy.html, terms.html, sms-terms.html and result.html.
 *
 * Every rule sits inside the `screen and (max-width: 1179.98px)` query, so
 * desktop (>=1180) renders exactly as before — each page's own inline <style>
 * still owns the desktop look, and this file only reflows it below the desktop
 * breakpoint. The `screen` type matters: a printed page is ~700-816 CSS px
 * wide, so without it "Print / Save PDF" on desktop would pick these rules up.
 *
 * Goals: no sideways page scroll at 390px (by wrapping, never by clipping),
 * 16px body text, 12px floor for labels, 44px tap targets that do not overlap,
 * safe-area gutters. Pages link it with an absolute /static-pages.css
 * so the /privacy, /terms and /sms-terms clean-URL aliases resolve it too.
 */
@media screen and (max-width: 1179.98px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* Long unbroken strings (URLs, emails, job ids, phone lists) wrap instead of
     widening the page. */
  p, li, a, code, h1, h2, h3,
  .row-value, .web-item a, .web-item-meta, .person-detail span, .error-box {
    overflow-wrap: anywhere;
  }

  /* ---- legal pages (privacy / terms / sms-terms) ---- */
  main {
    padding-top: 32px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  main { max-width: 70ch; }
  main h1 { font-size: 24px; line-height: 1.25; }
  main ul { padding-left: 20px; }
  main code { font-size: 13px; white-space: normal; }
  .callout { padding: 12px 14px; }

  /* ---- investigation result page (result.html) ---- */
  .page {
    padding-top: 20px;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .header { flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
  .header-left { min-width: 0; flex: 1 1 220px; }
  .header > div:last-child { flex-wrap: wrap; }
  .header-left p { font-size: 12px; }

  /* 16px body text (spec §5.1 static pages); the desktop page is 14px. */
  body, .row, .person-detail, .no-data { font-size: 16px; }

  .print-btn { min-height: 44px; padding: 10px 16px; font-size: 13px; }
  .section { padding: 16px; }

  /* 12px text floor for the labels that are 9-11px on desktop. */
  .section-title, .source, .person-role, .chip, .web-item-meta { font-size: 12px; }
  .person-detail span[style] { font-size: 12px !important; }

  .row-label { min-width: 88px; }
  .row-value { min-width: 0; }

  .person-card { padding: 12px; }
  .person-name { font-size: 16px; }
  .person-role { margin-top: 4px; }
  .person-detail { flex-wrap: wrap; min-width: 0; }

  /* Copy buttons: 44x44 hit area. No negative vertical margin, so each phone /
     email row grows to 44px and neighbouring hit areas can never overlap; the
     right-hand bleed only reaches into the card's own 12px padding. */
  .copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0 -12px 0 0;
    color: #64748b; /* 4.76:1 on white (WCAG 1.4.11 needs 3:1) */
  }
  .copy-btn svg { width: 16px; height: 16px; }

  .web-item { padding: 4px 0 10px; }
  .web-item a { font-size: 16px; min-height: 44px; padding: 10px 0; }
}