/* The incident register and its form (D1155). Staff pages only. */

.incident-when { white-space: nowrap; }
.incident-filter .ghost-button[aria-current="page"],
.incident-filter .ghost-button.active { border-color: var(--line-strong); font-weight: 600; }

.incident-who { display: grid; gap: 18px; }
.incident-who .register-row { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); }

.incident-form { display: grid; gap: 16px; }
.incident-form .panel-body { display: grid; gap: 12px; }
.incident-person { margin: 0; }
.incident-short { max-width: 14rem; }

.incident-ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 4px 16px; }

.incident-plan { display: grid; gap: 8px; justify-items: start; }
.incident-plan-picture { position: relative; display: inline-block; max-width: min(100%, 36rem); line-height: 0;
  cursor: crosshair; user-select: none; }
.incident-plan-picture img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; }
.incident-record .incident-plan-picture,
.incident-plan-preview { cursor: default; }
.incident-plan-mark { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: var(--red); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--red); pointer-events: none; }
.incident-plan-mark[hidden] { display: none; }

.incident-submit { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 24px; }

.incident-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 12px; }
.incident-facts dt { color: var(--muted); }
.incident-facts dd { margin: 0; }
.incident-facts dd p { margin: 0; }
.incident-record h3.small-label { margin: 14px 0 4px; }
.incident-updates li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.incident-updates li p { margin: 0; }
.incident-update-form,
.incident-email-form { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.incident-update-form .signin-field,
.incident-email-form .signin-field { width: min(100%, 36rem); }

@media (max-width: 640px) {
  .incident-facts { grid-template-columns: 1fr; }
}