/* Slice 10: Verify this, verified reports, auto-approval. */
@layer components {
  /* The guided camera's on-screen frame, per required shot. */
  .camera__frame[data-overlay="box"] { inset: 25% 25%; }
  .camera__frame[data-overlay="circle"] { inset: 20% 25%; border-radius: 50%; }
  .camera__frame[data-overlay="tape"] { inset: 40% 8%; border-style: solid; border-block-width: 4px; border-inline-width: 0; }

  .shot-list { display: grid; gap: var(--space-2); margin-block: var(--space-3); }
  .shot-list__item { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-line); border-radius: var(--radius); }
  .shot-list__item--taken { border-color: var(--color-success); }

  .photo-checks { color: var(--color-muted); }
  .photo-checks--verified { color: var(--color-success); }
  .verified-badge { white-space: normal; }

  .issue-report { margin-block: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-line); }

  .component-guide { display: grid; gap: var(--space-2); }
  .component-guide__diagram img { max-inline-size: 100%; border-radius: var(--radius); }

  /* Owner's photos beside the crew's: stacked on a phone, side by side on a desk. */
  .side-by-side { display: grid; gap: var(--space-4); }
  @media (min-width: 48rem) { .side-by-side { grid-template-columns: 1fr 1fr; } }

  .verification-result--damage_confirmed { color: var(--color-warning); }
}