/* sterilisation & safety log (safety.js): today's checklist, the month's history, the set-up sheet. Prefix sf3-. */
.sf3-wrap { max-width: 860px; margin: 0 auto; padding: 20px 22px 56px; display: flex; flex-direction: column; gap: 22px }
.sf3-tools { margin-inline-start: auto; display: flex; gap: 8px }
.sf3-tools .btn { display: inline-flex; align-items: center; gap: 6px }
.sf3-alarm { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: #fff0ee; color: #8f1a12; border: 1px solid #f5b5ae; line-height: 1.5 }

.sf3-today, .sf3-train, .sl-heldbox { border: 1px solid var(--sep); border-radius: 16px; background: #fff; overflow: hidden }
.sf3-today > header, .sf3-train > header, .sl-heldbox > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 18px 12px; border-bottom: 1px solid var(--sep) }
.sf3-today h2, .sf3-train h2, .sl-heldbox h2 { margin: 0; font-size: var(--fs-20); font-weight: 600; letter-spacing: -.01em }
.sf3-today header > div:first-child span, .sf3-train header > div:first-child span, .sl-heldbox header > div:first-child span { color: var(--ink2); font-size: var(--fs-13) }
.sf3-prog { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: var(--fs-12); color: var(--ink2); font-variant-numeric: tabular-nums }
.sf3-prog i { width: 132px; height: 6px; border-radius: 3px; background: var(--sep2); position: relative; overflow: hidden }
.sf3-prog i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p); background: var(--c4t); border-radius: 3px }
.sf3-list { display: flex; flex-direction: column }
.sf3-task { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--sep2) }
.sf3-task:last-child { border-bottom: 0 }
.sf3-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.sf3-tt b { font-size: var(--fs-15); font-weight: 600 }
.sf3-tt small { font-size: var(--fs-12); color: var(--ink2); line-height: 1.45 }
.sf3-task.done .sf3-tt b { color: var(--ink2); font-weight: 500 }
.sf3-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c7c7cc; display: grid; place-items: center; color: var(--ink2) }
.sf3-task.done .sf3-mark { background: var(--c4t); border-color: var(--c4t) }
.sf3-task.due .sf3-mark { border-color: var(--c3) }
.sf3-task.late .sf3-mark, .sf3-task.read .sf3-mark { border-color: #d92d20; box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 12px #d92d20 }
.sf3-task.notok .sf3-mark { border-color: #d92d20; background: #d92d20; color: #fff; font-weight: 800; font-size: var(--fs-14); line-height: 1 }
.sf3-task.notok .sf3-tt .sf3-note { display: block; margin-top: 2px; color: var(--ink2) }
.sf3-task.wait .sf3-mark { border-color: var(--sep); background: var(--sep2) }
.sf3-task.soon .sf3-mark { border-style: dashed }
.sf3-act { display: flex; align-items: center; gap: 8px; justify-content: flex-end }
.sf3-go { min-height: 44px; min-width: 150px; padding: 6px 18px; border-radius: 10px; background: #fff; color: var(--acc); border: 1px solid rgba(14,94,89,.35); font-weight: 600; font-size: var(--fs-14); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center }
.sf3-go small { font-weight: 400; font-size: var(--fs-12); opacity: .9 }
.sf3-go.ok { color: #1d7a3a; border-color: rgba(29,122,58,.4) }
.sf3-go.quiet { color: var(--ink2); border-color: var(--sep) }
.sf3-go:disabled, .sf3-go.sf3-wait { background: var(--sep2); color: var(--ink2); cursor: default; font-weight: 500; font-size: var(--fs-13) }
.sf3-other { min-height: 40px; padding: 0 12px; border-radius: 10px; background: var(--sep2); font-weight: 500; font-size: var(--fs-13); color: var(--ink) }
.sf3-other.lk { background: none; color: var(--acc); padding: 0 6px }
.sf3-other.bad { background: #fff0ee; color: #b42318 }
.sf3-bad { color: #b42318; font-weight: 600 }
.sf3-today > footer { padding: 11px 18px; border-top: 1px solid var(--sep); background: #fafafb; font-size: var(--fs-12); color: var(--ink2); display: flex; flex-wrap: wrap; gap: 4px 16px }
.sf3-today > footer span { color: var(--ink) }
.sf3-today > footer small { color: var(--ink2); font-size: var(--fs-12) }

.sf3-hist > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px }
.sf3-hist h3 { margin: 0; font-size: var(--fs-16); font-weight: 600 }
.sf3-mo { display: flex; align-items: center; gap: 6px }
.sf3-mo b { min-width: 118px; text-align: center; font-weight: 600 }
.sf3-mo .i { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--sep2) }
.sf3-mo .i:disabled { opacity: .35; cursor: default }
.sf3-mo .b { height: 32px; padding: 0 10px; border-radius: 8px; background: var(--sep2); font-weight: 500 }
.sf3-day { margin-top: 12px }
.sf3-day h4 { margin: 0 0 4px; font-size: var(--fs-12); font-weight: 600; color: var(--ink2) }
.sf3-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--sep2); font-size: var(--fs-13); align-items: baseline }
.sf3-t { color: var(--ink2); font-variant-numeric: tabular-nums }
.sf3-w { display: flex; flex-direction: column; gap: 2px }
.sf3-w small { color: var(--ink2); font-size: var(--fs-12) }
.sf3-by { color: var(--ink2); font-size: var(--fs-12); white-space: nowrap }
.sf3-row.void .sf3-x { text-decoration: line-through; color: var(--ink3) }
.sf3-none { color: var(--ink2); padding: 14px 0 }
.sf3-foot { margin: 16px 0 0; font-size: var(--fs-12); color: var(--ink2) }

.sf3-hint { margin: 0; color: var(--ink2); font-size: var(--fs-13) }
.sf3-setup { width: 760px }
.sf3-setup > * { flex-shrink: 0 }
.sf3-setup > .lk-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px }
.sf3-setup h3 { margin: 6px 0 0; font-size: var(--fs-15); font-weight: 600 }
.sf3-machs { display: flex; flex-direction: column; gap: 6px }
.sf3-mrow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 36px; gap: 8px; align-items: center }
.sf3-kind { font-size: var(--fs-12); color: var(--ink2) }
.sf3-mrow input, .sf3-crow.own input { height: 40px; border: 1px solid var(--sep); border-radius: 10px; padding: 0 12px; font: inherit; font-size: var(--fs-14); min-width: 0 }
.sf3-rm { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--ink2) }
button.sf3-rm:hover { background: var(--sep2) }
.sf3-adds { display: flex; gap: 8px; flex-wrap: wrap }
.sf3-adds .mini-btn { display: inline-flex; align-items: center; gap: 5px }
.sf3-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start }
.sf3-sel { height: 38px; border: 1px solid var(--sep); border-radius: 9px; padding: 0 8px; font: inherit; font-size: var(--fs-13); background: #fff; max-width: 100% }
.sf3-checks { flex: none; display: flex; flex-direction: column; border: 1px solid var(--sep); border-radius: 12px; overflow: hidden }
.sf3-crow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--sep2); flex-wrap: wrap }
.sf3-crow:last-child { border-bottom: 0 }
.sf3-crow label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; flex: 1 1 280px; min-width: 0 }
.sf3-crow label input { width: 20px; height: 20px; margin: 1px 0 0; flex: none }
.sf3-crow label span { display: flex; flex-direction: column; gap: 2px }
.sf3-crow label b { font-weight: 500; font-size: var(--fs-14) }
.sf3-crow:not(.on) label b { color: var(--ink2) }
.sf3-crow label small { font-size: var(--fs-12); color: var(--ink2) }
.sf3-crow.own input { flex: 1 1 240px }
.sf3-opts { display: flex; gap: 6px; align-items: center }

@media (max-width: 760px) {
  .sf3-wrap { padding: 14px 12px 40px }
  .sf3-task { grid-template-columns: 26px minmax(0, 1fr) }
  .sf3-act { grid-column: 2; justify-content: flex-start; flex-wrap: wrap }
  .sf3-two { grid-template-columns: 1fr }
  .sf3-mrow { grid-template-columns: 90px minmax(0, 1fr) 36px }
}

/* sterilisation loads (loads.js, SteriLoads.cs): failed loads and who to call, loads on hold, the visit's load. Prefix sl-. */
.sl-fails { display: flex; flex-direction: column; gap: 10px }
.sl-fail { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #fff0ee; color: #8f1a12; border: 1px solid #f5b5ae; line-height: 1.5 }
.sl-fail > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sl-fail .sl-who { font-weight: 600 }
.sl-fail.done { background: #fff; color: var(--ink); border-color: var(--sep) }
.sl-fail.done .sl-who { color: var(--ink2); font-weight: 500 }
.sl-heldbox { border-color: #ffd28a }
.sl-heldbox > header { background: #fffaf0 }
.sf3-mark.held { border-color: #e0a100; color: #a15c07 }
.sl-hold { margin-top: 2px }
.sl-hint { margin-top: -4px; line-height: 1.45 }
.sl-visit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-13) }
.sl-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 4px 3px 9px; border-radius: 999px; background: #eef8f1; color: #1d5c34; font-size: var(--fs-12) }
.sl-x { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--ink2) }
.sl-x svg { width: 12px; height: 12px }
.sl-x:hover { background: rgba(0, 0, 0, .06) }
.sl-use { display: inline-flex; align-items: center; gap: 4px }
.sl-picks { display: flex; flex-direction: column; gap: 8px }
.sl-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; min-height: 56px; border: 1px solid var(--sep); border-radius: 12px; background: #fff; text-align: start }
.sl-pick small { color: var(--ink2); font-size: var(--fs-12) }
.sl-pick:disabled { opacity: .55 }
.sl-say { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--sep2); font-size: var(--fs-13); line-height: 1.5; color: var(--ink2) }
.sl-plist { display: flex; flex-direction: column; border: 1px solid var(--sep); border-radius: 12px; overflow: hidden }
.sl-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 11px 14px; border-bottom: 1px solid var(--sep2) }
.sl-prow:last-child { border-bottom: 0 }
.sl-prow > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sl-prow.called { background: #fafafb }
.sl-tel { font-variant-numeric: tabular-nums; color: var(--c1t); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center }
.sl-done { display: inline-flex; flex-direction: column; gap: 1px; font-size: var(--fs-12); color: #1d5c34 }
.sl-done small { color: var(--ink2) }
@media (max-width: 760px) {
  .sl-fail { flex-direction: column; align-items: stretch }
  .sl-prow { grid-template-columns: minmax(0, 1fr) auto }
  .sl-prow > :last-child { grid-column: 1 / -1 }
}
.sl-recent { display: flex; flex-direction: column; gap: 8px }
.sl-recent > .lk-link { align-self: flex-start }
.sl-rlist { border: 1px solid var(--sep); border-radius: 12px; background: #fff; overflow: hidden }
.sl-rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--sep2); font-size: var(--fs-13) }
.sl-rrow:last-child { border-bottom: 0 }
.sl-st { font-size: var(--fs-12); color: var(--ink2) }
.sl-st.released { color: #1d5c34 }
.sl-st.held { color: #a15c07; font-weight: 600 }
.sl-st.failed { color: #b42318; font-weight: 600 }
.sl-noload { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: #fff0ee; color: #b42318; font-size: var(--fs-12); font-weight: 600 }
.sl-tag { display: inline-flex; padding: 1px 8px; border-radius: 999px; background: var(--sep2); color: var(--ink2); font-size: var(--fs-12); font-weight: 500 }
.sl-tag.warn { background: #fff4e0; color: #8a4b00 }
.sl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px }
.sl-try { color: #8a4b00; font-size: var(--fs-12); margin-top: 2px }
.sl-outs { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end }
.sl-empty { padding: 12px 14px; border: 1px dashed var(--sep); border-radius: 12px; font-size: var(--fs-13); line-height: 1.5; display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.sl-out { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #fff0ee; color: #8f1a12; border: 1px solid #f5b5ae; line-height: 1.5 }
.sl-out > div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.sl-mach { opacity: .85 }
.sl-q input { font-size: var(--fs-18); font-variant-numeric: tabular-nums; letter-spacing: .04em }
.sl-params { padding: 0 }
.sl-photo { align-self: flex-start }
.sl-macts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--sep2) }
@media (max-width: 760px) { .sl-out { flex-direction: column; align-items: stretch } .sl-outs { justify-content: flex-start } }

/* a cycle: Pass and Fail side by side, the same size, colour only on the word (owner, 25 Oct) */
.sf3-cyc { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-size: var(--fs-14); margin-inline-end: 4px }
.sf3-cyc small { font-weight: 400; font-size: var(--fs-12); color: var(--ink2) }
.sf3-pf { min-height: 44px; min-width: 92px; padding: 0 16px; border-radius: 10px; background: #fff; font-weight: 600; font-size: var(--fs-14); border: 1px solid var(--sep) }
.sf3-pf.pass { color: #1d7a3a; border-color: rgba(29,122,58,.45) }
.sf3-pf.pass:hover { background: #effaf2 }
.sf3-pf.fail { color: #b42318; border-color: rgba(180,35,24,.4) }
.sf3-pf.fail:hover { background: #fff0ee }
/* team training: apart from today's machine work */
.sf3-train { margin-top: 18px }
.sf3-train > header h2 { font-size: var(--fs-16) }