/* ---- V1.64 Incident investigation (inc-): Client\Apps\Incidents (the list, the dashboard, an incident). Design system tokens only
   (--os-*), full page width; a new app file: every design guard at zero (DesignGuardTests.ZeroTolerance). ---- */

.inc-page { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.inc-page > * { min-width: 0; max-width: 100%; }
/* V1.66: the Incidents tab of Health and Safety (Apps\Incidents\IncidentsTab.razor), inside .saf-page */
.inc-tab { display: flex; flex-direction: column; gap: var(--os-space-4); min-width: 0; }
.inc-tab > * { min-width: 0; max-width: 100%; }
.inc-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-2) var(--os-space-4); }
.inc-views .os-caption { flex: 1 1 320px; min-width: 0; }
.inc-page .os-pagehead > * { min-width: 0; }
.inc-kpis, .inc-notice { margin: 0; }
.inc-grid { align-items: start; }
/* V1.66 (the owner: "more compact"): the four count panels two by two on a wide screen */
.inc-grid > * { --span: 6; }
.inc-filters .os-select { flex: 0 1 220px; width: auto; min-width: 160px; }
.inc-wide { display: grid; margin-top: var(--os-space-3); }
.inc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--os-space-2); margin-top: var(--os-space-3); }
.inc-actions--start { justify-content: flex-start; margin-top: 0; }
.inc-inline { display: flex; flex-wrap: wrap; gap: var(--os-space-2); align-items: center; margin-top: var(--os-space-3); }
.inc-inline--tight { margin-top: 0; }
.inc-inline .os-select { flex: 0 1 240px; width: auto; }
.inc-inline .os-input { flex: 1 1 220px; width: auto; }
.inc-pad { padding: 0 var(--os-space-4) var(--os-space-3); }
.inc-text { white-space: pre-line; color: var(--os-text); }
p.inc-text { margin: 0 0 var(--os-space-3); }
.inc-ref { overflow-wrap: anywhere; }
.inc-missing { margin: 0; padding-left: var(--os-space-4); }
.inc-team { border: 0; margin: var(--os-space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--os-space-1) var(--os-space-4); }

/* Lists: my work, the lessons, the evidence, the timeline, the history */
.inc-list, .inc-timeline, .inc-counts { list-style: none; margin: 0; padding: 0; }
.inc-list li, .inc-timeline li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--os-space-1) var(--os-space-3);
  padding: var(--os-space-2) var(--os-space-4); border-bottom: 1px solid var(--os-border); }
.inc-list li:last-child, .inc-timeline li:last-child { border-bottom: 0; }
.inc-list--tight li { padding: var(--os-space-1) 0; }
.inc-list a { color: var(--os-accent-text); text-decoration: none; }
.inc-list a:hover { text-decoration: underline; }
.inc-timeline li { border-left: 2px solid var(--os-border); margin-left: var(--os-space-4); }

/* The 5 whys */
.inc-whys { margin: 0; padding: var(--os-space-2) var(--os-space-4) var(--os-space-2) var(--os-space-6); }
.inc-whys li { padding: var(--os-space-1) 0; }
.inc-q { display: block; color: var(--os-text-2); font: var(--os-type-small); }

/* The fishbone: the 6 M side by side, wrapping on a narrow screen */
.inc-fishbone { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--os-space-3); }
.inc-bone { border-top: 2px solid var(--os-border); padding-top: var(--os-space-2); min-width: 0; }

/* The dashboard's counts: the word, a meter, the number */
.inc-counts li { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(80px, 2fr) auto; align-items: center; gap: var(--os-space-3);
  padding: var(--os-space-1) 0; }
.inc-counts__n { text-align: right; min-width: 2ch; }

/* The facts of an incident */
.inc-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--os-space-1) var(--os-space-4); margin: 0 0 var(--os-space-4); }
.inc-facts dt { color: var(--os-text-2); font: var(--os-type-small); }
.inc-facts dd { margin: 0; }

/* Tables: the people, the actions */
.inc-table td { white-space: normal; vertical-align: top; }
.inc-table .inc-n { text-align: right; }
.inc-table .os-select { min-width: 140px; }

/* The photos from the field (the phone app; the thumbnails are Apps\Safety\HsePhoto.razor, safety.css) and a corrective action's
   done note */
.inc-photos { display: flex; flex-wrap: wrap; gap: var(--os-space-2); }
.inc-done-note { display: block; margin-top: var(--os-space-1); overflow-wrap: anywhere; }