/* Shared square-tile grid: visit editor "Investigation results" and "Photos & Videos".
   Native feel: 4px radius, hairline border, no shadows, no captions. */
.mg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
@media (min-width: 700px) { .mg-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
.mg-grid:empty { display: none; }
.mg-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 4px; border: 1px solid var(--border-light); background: var(--bg-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mg-tile > img, .mg-tile > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mg-file { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-secondary); }
.mg-file svg { width: 26px; height: 26px; }
.mg-ext { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mg-x { position: absolute; top: 3px; inset-inline-end: 3px; width: 22px; height: 22px; padding: 0; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 22px; text-align: center; cursor: pointer; }
.mg-x::before { content: ''; position: absolute; inset: -8px; }
.mg-play { position: absolute; inset-inline-start: 4px; bottom: 4px; display: flex; align-items: center; gap: 4px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; pointer-events: none; }
.mg-play svg { width: 9px; height: 9px; }
.mg-badge { position: absolute; inset-inline-end: 4px; bottom: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--success, #1a7f4b); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mg-badge svg { width: 11px; height: 11px; }
.mg-note { position: absolute; inset-inline-start: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mg-note svg { width: 10px; height: 10px; }
.mg-status { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.45); color: #fff; font-size: 11px; font-weight: 600; text-align: center; padding: 4px; }
.mg-tile[data-mg-state] .mg-status { display: flex; }
.mg-tile[data-mg-state="error"] .mg-status { background: rgba(120,20,20,.7); }
.mg-retry { border: 1px solid rgba(255,255,255,.7); background: transparent; color: #fff; border-radius: 4px; font-size: 11px; padding: 2px 8px; cursor: pointer; }
.mg-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: mg-rot .8s linear infinite; }
@keyframes mg-rot { to { transform: rotate(360deg); } }
.mg-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.mg-actions .btn-secondary, .mg-actions .btn-primary { padding: 4px 12px; font-size: 12px; }
.mg-extract[hidden] { display: none; }
.mg-sheet { position: fixed; inset: 0; z-index: 100001; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: center; }
.mg-sheet-card { width: 100%; max-width: 480px; background: var(--bg-card, #fff); border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.mg-sheet-msg { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.mg-sheet-card button { padding: 12px; font-size: 16px; }
/* Beat the legacy card rules for .inv-result-item (padding, margin, background). */
.mg-grid > .mg-tile { padding: 0; margin: 0; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 4px; }

/* Read-only grids in a saved visit (photos & videos, investigation files). */
.vx-grid { margin-top: 6px; }
.visit-extra-item + .vx-grid { margin-top: 10px; }
a.mg-tile.vx-tile { display: block; text-decoration: none; color: inherit; }
.vx-cap {
  position: absolute; inset-inline: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.vx-tile .mg-file + .vx-cap { color: var(--text-secondary); background: none; text-align: center; }
/* Hover (or keyboard focus): the whole name, wrapped, instead of one clipped line. */
.vx-tile:is(:hover, :focus-visible) .vx-cap {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35; max-height: 100%; overflow-y: auto;
  padding-top: 8px; background: rgba(0, 0, 0, .74);
}
.vx-tile:is(:hover, :focus-visible) .mg-file + .vx-cap { background: var(--surface); color: var(--text); }