/* TGO Investigations™ — © 2026 Damon Townsend. All rights reserved.
   Responsive layer. Loaded after theme.css on every page.

   The app has to work in three places a PI actually uses it:
     laptop   (>1024px)  — the office: full tables, side-by-side panels
     tablet   (641-1024) — the car: bigger touch targets, fewer columns
     phone    (<=640px)  — on foot: stacked cards, one thumb, no pinching

   Nothing here changes the desktop layout; every rule is inside a breakpoint
   or a pointer query. */

/* ---------- universal: never let a page scroll sideways ---------- */
body { overflow-x:hidden; }
img, svg, video, canvas { max-width:100%; }

/* Long unbroken strings (SHA-256 hashes, URLs, emails) are a real source of
   horizontal overflow in this app — evidence hashes are 64 chars. */
.brk { overflow-wrap:anywhere; word-break:break-word; }

/* ---------- touch devices: fingers need 44px, not 28px ---------- */
@media (pointer: coarse) {
  .btn, .lnk, nav button, .case-btn, .chip { min-height:44px; }
  .btn, .lnk { padding-top:11px; padding-bottom:11px; }
  nav button { padding-top:14px; padding-bottom:14px; }
  input, select, textarea { min-height:44px; }
  /* checkboxes stay small by default and are hard to hit */
  input[type="checkbox"], input[type="radio"] { min-height:0; width:20px; height:20px; }
  td input[type="checkbox"] { transform:scale(1.15); }
}

/* ---------- iOS zooms the whole page when you focus a field under 16px ----------
   That is the single most irritating mobile bug in a form-heavy app: tap a
   field, the layout jumps, and you have to pinch back out. 16px stops it. */
@media (max-width: 900px) {
  input, select, textarea { font-size:16px; }
}

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  main { padding-left:12px; padding-right:12px; }
  .modal { max-width:100%; }
}

/* ---------- phone ---------- */
@media (max-width: 640px) {
  header { padding:10px 12px; gap:8px; }
  header .who { width:100%; order:10; font-size:12px; }
  /* Icon-only buttons keep the header to one line instead of three. */
  header .lnk { padding:8px 10px; }
  header .lnk .lbl { display:none; }

  nav { padding:0 8px; }
  nav button { padding:12px 12px; font-size:13.5px; }

  main { padding:14px 10px 70px; }
  h2 { margin:14px 0 8px; }
  .panel { padding:13px; border-radius:9px; }

  .stats { grid-template-columns:1fr 1fr; gap:9px; }
  .stat { padding:12px; }
  .stat .n { font-size:23px; }
  .stat .l { font-size:10.5px; }
  .grid { grid-template-columns:1fr; }

  /* Form rows stack instead of squeezing to unusable widths. */
  .row { flex-direction:column; align-items:stretch; gap:9px; }
  .row > div, .row > button { width:100% !important; min-width:0 !important; }

  /* Modals become full-height sheets — a centred box with margins wastes a
     phone screen and puts the action buttons below the fold. */
  .modal-bg { padding:0; }
  .modal { border-radius:0; min-height:100vh; padding:16px 14px 40px; border:none; }
  .modal h3 { font-size:16px; padding-right:34px; }
  .mx { position:absolute; top:10px; right:12px; float:none; font-size:26px;
        width:40px; height:40px; }

  .case-card .t { font-size:15px; min-width:0; }
  .case-card .meta { gap:10px; font-size:12px; }
}

/* ---------- tables become cards on a phone ----------
   A 7-column table on a 375px screen is unreadable however you scroll it.
   common.js copies each column heading onto its cells as data-label, so the
   same markup renders as a table on a laptop and a labelled card on a phone. */
@media (max-width: 640px) {
  table.tgi-stack, table.tgi-stack tbody, table.tgi-stack tr, table.tgi-stack td { display:block; width:100%; }
  table.tgi-stack thead { display:none; }
  table.tgi-stack tr {
    border:1px solid var(--line); border-radius:10px; background:var(--panel2);
    margin-bottom:9px; padding:5px 11px;
  }
  table.tgi-stack td {
    display:flex; justify-content:space-between; align-items:baseline; gap:14px;
    border:none; border-bottom:1px solid var(--line); padding:8px 0; text-align:right;
    overflow-wrap:anywhere;
  }
  table.tgi-stack tr td:last-child { border-bottom:none; }
  table.tgi-stack td::before {
    content:attr(data-label); flex:0 0 40%; text-align:left; color:var(--dim);
    font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; padding-top:2px;
  }
  /* A cell whose heading was blank (action columns) shouldn't reserve label space. */
  table.tgi-stack td[data-label=""]::before { content:none; }
  table.tgi-stack td[data-label=""] { justify-content:flex-end; gap:8px; }
  /* "Loading…" / "nothing here" rows span the card rather than splitting. */
  table.tgi-stack td[colspan]::before { content:none; }
  table.tgi-stack td[colspan] { justify-content:flex-start; text-align:left; }
}

/* Tables that are genuinely numeric stay as tables but scroll inside the panel
   rather than stretching the page. Opt in with class="tgi-scroll". */
@media (max-width: 640px) {
  .tgi-scroll { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* ---------- print: reports and invoices must not inherit any of this ---------- */
@media print {
  header, nav, .lnk, .btn, .modal-bg { display:none !important; }
}

/* ---------- version update banner ----------
   Injected by common.js on every page after a release, until dismissed. The
   headline scrolls because there is more to say than fits on a phone, and the
   whole strip is a link to the full notes. */
#tgi-verbar {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(90deg,#1d2530,#2a3444);
  border-bottom:2px solid var(--amber, #d9a441);
  padding:0 8px 0 0; position:relative; z-index:60; overflow:hidden;
}
.tgi-vb-link {
  flex:1; display:flex; align-items:center; gap:10px; min-width:0;
  text-decoration:none; color:#f0e2c0; padding:7px 0 7px 10px;
}
.tgi-vb-tag {
  flex:0 0 auto; background:var(--amber, #d9a441); color:#1a1408;
  font-weight:800; font-size:11.5px; letter-spacing:.5px;
  padding:2px 9px; border-radius:99px;
}
.tgi-vb-track { flex:1; min-width:0; overflow:hidden; }
.tgi-vb-move {
  display:inline-block; white-space:nowrap; font-size:13px; font-weight:600;
  padding-left:100%; animation:tgi-vb-scroll 42s linear infinite;
}
.tgi-vb-link:hover .tgi-vb-move { animation-play-state:paused; }
@keyframes tgi-vb-scroll { to { transform:translateX(-100%); } }
.tgi-vb-x {
  flex:0 0 auto; background:none; border:none; color:#c9b892;
  font-size:22px; line-height:1; cursor:pointer; padding:4px 8px;
}
.tgi-vb-x:hover { color:#fff; }
/* Someone who prefers less motion still gets the message, just not the scroll. */
@media (prefers-reduced-motion: reduce) {
  .tgi-vb-move { animation:none; padding-left:0;
                 overflow:hidden; text-overflow:ellipsis; max-width:100%; }
}