/* Slice 7: the crew app on site: check-ins, the camera, access codes, the outbox badge. */
@layer components {
  .site-visit { flex-wrap: wrap; }
  .site-visit__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
  .site-visit__fields { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
  .site-visit__field { display: grid; gap: var(--space-1); font-size: 0.85rem; }
  .site-visit__field:has(textarea) { min-inline-size: min(100%, 16rem); }

  .access-code { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.08em; padding: var(--space-1) var(--space-2);
    background: var(--color-warning-bg); color: var(--color-warning); border-radius: var(--radius); }

  .camera { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line); }
  .camera__viewfinder { position: relative; margin-block: var(--space-3); }
  .camera__viewfinder video { display: block; inline-size: 100%; max-block-size: 70vh; object-fit: cover; border-radius: var(--radius); background: #000; }
  /* The framing overlay: keep the subject inside it. */
  .camera__frame { position: absolute; inset: 12% 10% 22%; border: 2px dashed rgb(255 255 255 / 0.85); border-radius: var(--radius); pointer-events: none; }
  .camera__tip { position: absolute; inset-inline: var(--space-3); inset-block-start: var(--space-3); margin: 0; padding: var(--space-1) var(--space-2);
    background: rgb(0 0 0 / 0.6); color: #fff; border-radius: var(--radius); font-size: 0.9rem; }

  .capture-label { color: var(--color-muted); }
  .capture-label--in_app_location_matched { color: var(--color-success); }

  .outbox-badge { position: sticky; inset-block-start: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline;
    padding: var(--space-2) var(--space-4); background: var(--color-warning-bg); color: var(--color-warning); }

  .form--inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: end; }
}