/*
 * Worker registration: step rail, checklist, photo slots and signature pad.
 * Ticks are green here, not brown: see the exception in base.css.
 */

.lang { display: flex; border: 1px solid var(--line-strong); border-radius: 7px; overflow: hidden; flex: none; }
.lang button { background: var(--surface); border: 0; padding: 6px 11px; font-size: 12px; font-weight: 600; letter-spacing: .04em; cursor: pointer; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }

.hero { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }

.code-box { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.code-box input { flex: 1; min-width: 150px; font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface-2); }
.code-box input::placeholder { color: var(--line); letter-spacing: .18em; }

.steps { display: flex; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.step { flex: 1; padding: 9px 4px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; align-items: center; }
.step:last-child { border-right: 0; }
.step .n { font-family: var(--mono); font-size: 13px; }
.step[data-state="on"] { background: var(--accent); color: var(--surface); }
.step[data-state="done"] { color: var(--ok); background: var(--ok-soft); }
@media (max-width: 420px) { .step { font-size: 9.5px; } }

fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.field.bad input { border-color: var(--crit); background: var(--crit-soft); }

.checklist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); align-items: flex-start; }
.item:last-child { border-bottom: 0; }
.item.checked { background: var(--ok-soft); }
.item.off { background: var(--surface-2); }
.item > input[type="checkbox"] { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--ok); cursor: pointer; }
.item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.item-title { font-weight: 700; font-size: 15.5px; }
.check input { accent-color: var(--ok); }
.needs-photo { font-size: 13px; font-weight: 700; color: var(--warn); }

.shot-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shot { width: 92px; height: 64px; border: 1px solid var(--line-strong); border-radius: 8px; object-fit: cover; background: var(--sunk); display: block; }

.consent { background: var(--surface-2); border: 0; border-left: 2px solid var(--accent); border-radius: 0; padding: 14px 16px; font-size: 14px; color: var(--ink-2); }

.sig { border: 1.5px dashed var(--line-strong); border-radius: 8px; background: #fff; position: relative; overflow: hidden; }
.sig canvas { display: block; width: 100%; height: 170px; touch-action: none; cursor: crosshair; }
.sig .baseline { position: absolute; left: 18px; right: 18px; bottom: 36px; border-bottom: 1px solid #D6DBDE; pointer-events: none; }
.sig .hint { position: absolute; left: 18px; bottom: 12px; font-size: 11.5px; color: #69787F; pointer-events: none; }

.done-mark { width: 54px; height: 54px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 28px; font-family: var(--display); }
.center { align-items: center; text-align: center; }

/* Induction PDF viewer: full screen, pages stacked; zoom widens the pages and the list scrolls sideways. */
.doc-name { overflow-wrap: anywhere; }
.viewer { position: fixed; inset: 0; z-index: 70; background: var(--sunk); display: flex; flex-direction: column; }
.viewer-head { display: flex; gap: 8px; align-items: center; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: var(--surface); border-bottom: 1px solid var(--line); }
.viewer-title { flex: 1; min-width: 0; font-weight: 600; }
.viewer-head .icon-btn:disabled { opacity: .4; cursor: default; }
.viewer-pages { --zoom: 1; flex: 1; overflow: auto; padding: 12px; -webkit-overflow-scrolling: touch; }
.viewer-page { width: calc(min(100%, 900px) * var(--zoom)); margin: 0 auto 12px; background: #fff; box-shadow: var(--shadow); border-radius: 2px; }
.viewer-page canvas { display: block; width: 100%; height: auto; }
.viewer-foot { display: flex; gap: 10px; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line); }