/* The Safety tile (Safety wave): the views' little extras, and the lockout
   reminder and the lock log. Rows are the app's ordinary .item cards. Words
   carry the meaning (SAFETY, REVIEW DUE, OVERDUE); a colour never does alone. */
.safety-tile .segs{flex-wrap:wrap;}
.safety-tile .sf-find{margin:6px 0 10px; width:100%;}
.sf-open{display:flex; gap:8px; align-items:center; margin:6px 0 12px; flex-wrap:wrap;}
.sf-open input{flex:1 1 140px; min-width:0;}
.sf-open button{width:auto; flex:none;}
.sf-review{font-weight:600;}
.sf-review.due{color:var(--bad);}
.sf-job .t{margin:2px 0;}

/* the lockout, read only: the tab's reading and the reminder at On Job */
.sf-readout h4{margin:12px 0 4px; font-size:13px; letter-spacing:.04em; text-transform:uppercase;}
.sf-sources{display:flex; flex-direction:column; gap:8px;}
.sf-src{border:1px solid var(--line); padding:8px 10px; line-height:1.45;}
.sf-src-h{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;}
.sf-n{display:inline-block; min-width:1.6em; text-align:center; font-family:var(--mono); font-weight:700; border:1px solid var(--line);}
.sf-k{color:var(--muted);}
.sf-pic{display:flex; align-items:center; gap:8px; margin-top:6px; padding:0; background:none; border:0; text-align:left; color:var(--text); width:auto;}
.sf-pic img{width:84px; height:64px; object-fit:cover; border:1px solid var(--line);}
.sf-steps{margin:0; padding-left:1.6em; line-height:1.5;}
.sf-text{margin:0; white-space:pre-wrap;}
.sf-ppe{display:flex; flex-wrap:wrap; gap:6px;}
.sf-remind .sf-lockson{margin:0 0 8px; padding-left:1.2em;}

/* the lock log */
.sf-locklog{margin-top:16px;}
.sf-lockson{margin:4px 0 8px; padding-left:1.2em; line-height:1.5;}
.sf-locklog .btnrow{margin:6px 0;}
.sf-lockhist{margin-top:6px;}
.sf-lockhist .m{font-family:var(--mono); font-size:12px; color:var(--muted); margin:2px 0;}