/* induction.css — the public online site induction (no login). Uses the site.css tokens, inputs and buttons. */
body.induction{background:var(--cream);display:block;min-height:100vh;padding:0}
.ind-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;background:var(--panel);border-bottom:3px solid var(--red);padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));height:auto;min-height:56px}   /* two lines of text: not the portal's fixed 56 px header (it clipped them) */
.ind-head img{height:36px}
.ind-head b{display:block;font-size:15px;color:var(--ink)}
.ind-head span{display:block;font-size:12px;color:var(--muted)}
.ind-wrap{max-width:720px;margin:0 auto;padding:16px 16px calc(24px + env(safe-area-inset-bottom,0px))}
.ind-wrap .quiz-wrap{max-width:none}
.ind-wrap .quiz-nav{bottom:0;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}   /* clear of the iPhone home bar */
.ind-intro h1{font-size:24px;color:var(--ink);margin:0 0 8px;line-height:1.2}
.ind-intro p{font-size:15px;color:var(--ink);margin:0 0 10px;line-height:1.45}
.ind-intro ul{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.5}
.ind-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 18px}
.ind-steps div{background:var(--surface-2);border-radius:var(--r-sm);padding:8px 6px;text-align:center;font-size:12px;font-weight:bold;color:var(--muted);line-height:1.3}
.ind-steps div b{display:block;font-size:18px;color:var(--oxblood)}
.ind-resume{background:var(--warn-bg);border:1px solid var(--warn);border-radius:var(--r-sm);padding:10px 12px;font-size:14px;margin:0 0 14px}
.ind-note{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.4}
.ind-req::after{content:" *";color:var(--red)}
/* yes / no / n-a and other option rows */
.opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.opts button{flex:1 1 90px;min-height:48px;border:2px solid var(--border-strong);border-radius:10px;background:var(--panel);font:bold 15px var(--font);color:var(--ink);cursor:pointer;padding:8px 12px}
.opts button.sel{border-color:var(--red);background:var(--gold-light);color:var(--oxblood)}
.opts button.sel::before{content:"\2713  ";color:var(--red)}
.kind-opts{display:grid;gap:10px;margin-top:6px}
.kind-opt{display:block;width:100%;text-align:left;border:2px solid var(--border-strong);border-radius:12px;padding:14px;background:var(--panel);cursor:pointer;font:inherit;color:var(--ink);min-height:64px}
.kind-opt b{display:block;font-size:17px}
.kind-opt span{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.35}
.kind-opt.sel{border-color:var(--red);background:var(--gold-light)}
.kind-opt.sel b{color:var(--oxblood)}
/* .quiz-wrap label (site.css) is block, bold, 13 px — these tick rows need their own look back (audit 01/10/2026) */
.chk,.quiz-wrap label.chk{display:flex;align-items:flex-start;gap:10px;padding:10px 0;margin:0;border-bottom:1px solid var(--border);font-size:15px;font-weight:normal;line-height:1.4;cursor:pointer}
.chk:last-child{border-bottom:0}
.chk input{width:22px;height:22px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--red)}
.ppe-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.ppe-grid .chk,.quiz-wrap .ppe-grid label.chk{border:1px solid var(--border);border-radius:var(--r-sm);padding:0 12px;background:var(--panel);min-height:56px;align-items:center;font-weight:bold}
.ppe-grid .chk input{margin:0}
@media (max-width:400px){.ppe-grid{grid-template-columns:1fr}}
/* selfie and file uploads */
.selfie-box{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:6px}
.selfie-box img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:3px solid var(--red);background:var(--surface-2)}
.selfie-box .ph{width:120px;height:120px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:40px;border:2px dashed var(--border-strong)}
.selfie-box .btn-photo,.file-line .btn-photo{width:auto;flex:0 0 auto}
.file-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:6px}
.file-line .fname{font-size:13px;color:var(--ok);font-weight:bold;flex:1 1 160px;word-break:break-all}
.file-line .fname.none{color:var(--muted);font-weight:normal}
.file-line img{width:64px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
/* slide pictures */
.slide img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin:0 0 14px;background:var(--surface-2)}
.done-thanks{font-size:16px;margin:0 0 10px;line-height:1.45}
.ind-again{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;background:var(--panel)}
.ind-again summary{cursor:pointer;font-weight:bold;color:var(--oxblood);font-size:14px;min-height:28px;line-height:1.4}
.ind-again .btn-outline{width:auto}
.card-row{border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 12px;margin-top:8px;background:var(--panel)}
.card-row .row2{gap:8px}
.card-row .rm{margin-top:6px;font:bold 13px var(--font);color:var(--red);background:none;border:0;cursor:pointer;padding:8px 0;min-height:44px}
/* slides */
.slide{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:20px 18px;box-shadow:var(--shadow);min-height:280px}
.slide .kicker{font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin:0 0 6px}
.slide h2{font-size:24px;line-height:1.2;color:var(--ink);margin:0 0 14px;padding-bottom:12px;border-bottom:3px solid var(--red)}
.slide ul{list-style:none;margin:0;padding:0}
.slide li{position:relative;padding:8px 0 8px 30px;font-size:16px;line-height:1.45;color:var(--ink);border-bottom:1px solid var(--surface-2)}
.slide li:last-child{border-bottom:0}
.slide li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--red)}
.slide-count{font-size:12px;color:var(--muted);text-align:center;margin-top:10px;text-transform:uppercase;letter-spacing:.06em}
.slide-dots{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.slide-dots span{width:8px;height:8px;border-radius:50%;background:var(--border)}
.slide-dots span.seen{background:var(--red)}
.slide-dots span.cur{background:var(--oxblood);transform:scale(1.4)}
/* quiz */
.q-num{font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin:0 0 6px}
.q-text{font-size:19px;line-height:1.3;color:var(--ink);margin:0 0 14px;font-weight:bold}
.q-opts{display:grid;gap:8px}
.q-opt{display:block;width:100%;text-align:left;border:2px solid var(--border-strong);border-radius:10px;padding:12px 14px;background:var(--panel);font:15px var(--font);color:var(--ink);cursor:pointer;min-height:52px;line-height:1.35}
.q-opt.sel{border-color:var(--red);background:var(--gold-light);font-weight:bold;color:var(--oxblood)}
.q-result{text-align:center;padding:10px 0}
.q-result .score{font-size:44px;font-weight:bold;color:var(--ok);line-height:1;margin:6px 0}
.q-result.fail .score{color:var(--red)}
/* done */
.code-box{background:var(--panel);border:3px solid var(--red);border-radius:16px;padding:22px 16px;text-align:center;margin:14px 0}
.code-box .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin:0 0 6px;font-weight:bold}
.code-box .code{font-size:40px;font-weight:bold;letter-spacing:.14em;color:var(--oxblood);line-height:1.1;word-break:break-all}
.code-box .when{font-size:15px;color:var(--ink);margin:10px 0 0}
.done-list{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.5}
.done-btns{display:flex;flex-direction:column;gap:10px;margin-top:14px}
@media (min-width:560px){.done-btns{flex-direction:row}.done-btns>*{flex:1}}
@media print{.ind-head,.quiz-nav,.done-btns,#viewForm{display:none!important}body.induction{background:var(--panel)}.code-box{border-width:2px}}
/* selfie: phone camera, laptop webcam or an uploaded photo; or "my phone can't take photos" */
.selfie-btns{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.selfie-btns .btn-text{min-height:40px;padding:4px 0;color:var(--oxblood);text-decoration:underline;font-weight:bold}
.selfie-btns button:disabled{opacity:.45;cursor:not-allowed}
.cam-box{margin:12px 0;background:#111;border-radius:14px;padding:10px;text-align:center}
.cam-box video{width:100%;max-width:420px;aspect-ratio:1;object-fit:cover;border-radius:10px;transform:scaleX(-1);background:#000}
.cam-box .cam-btns{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.cam-box .cam-btns button{width:auto;min-height:48px;padding:8px 20px}
.ind-nophone{margin-top:14px;border:1px dashed var(--border-strong);border-radius:var(--r-sm);padding:10px 12px;background:var(--panel)}

/* card photos: framed camera button + "Upload a photo instead" */
.file-line .btn-text{width:auto;min-height:40px;padding:4px 6px;color:var(--oxblood);text-decoration:underline;font-weight:bold;background:none;border:0;cursor:pointer}
.file-line img.card-prev{width:96px;height:61px;object-fit:cover}

/* the firms on this site, offered under "Employer's company" (05/10/2026) */
.ind-cosugs{margin:8px 0 4px}
.ind-cosugs:empty{display:none}
.ind-cosugs button{display:inline-block;margin:0 8px 8px 0;min-height:44px;padding:8px 16px;border:2px solid var(--oxblood);border-radius:999px;background:var(--panel);color:var(--oxblood);font:bold 15px var(--font);cursor:pointer}
.ind-cosugs button:active{background:var(--gold-light)}