/* take5.css - the Take 5 tool (take5.js). Uses the dashboard's palette (styles.css), so it follows dark mode.
   One card per step, centred on the page, sized for a phone on site: large touch targets, one column on
   narrow screens. The last step's card ends with the submit button; earlier records sit well apart below. */
.t5{max-width:860px; margin:0 auto}
.t5-form{display:flex; flex-direction:column; gap:14px}
.t5-card{margin-bottom:0; padding:20px 22px}
.t5 > .t5-records{margin-top:40px}

/* step headings */
.t5-head{display:flex; align-items:center; gap:12px; margin:0 0 16px}
.t5-head h3{margin:0; font-size:15px; font-weight:800; color:var(--navy)}
.t5-n{display:inline-flex; align-items:center; justify-content:center; flex:none; width:28px; height:28px; border-radius:50%; background:var(--helia); color:#fff; font-size:13px; font-weight:800}

/* fields */
.t5-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.t5-wide{grid-column:1 / -1}
.t5-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.t5-label{font-size:12px; font-weight:700; color:var(--muted)}
.t5-field input, .t5-field select, .t5-static, .t5-ctl textarea{box-sizing:border-box; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; font-size:14px; font-weight:500; transition:border-color .15s, box-shadow .15s}
.t5-static{display:flex; align-items:center; background:var(--bg); font-weight:700}
.t5-field select{cursor:pointer}
.t5-field input:focus, .t5-field select:focus, .t5-ctl textarea:focus{outline:none; border-color:var(--helia); box-shadow:0 0 0 3px rgba(238,108,45,.16)}

.t5-people{display:flex; flex-direction:column; gap:6px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-soft)}
.t5-person{display:grid; grid-template-columns:1fr 36px; gap:12px; align-items:end}
.t5-person + .t5-person{margin-top:6px}
.t5-x{width:36px; height:44px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); font-size:18px; line-height:1; cursor:pointer}
.t5-x:hover{border-color:var(--red); color:var(--red)}
.t5-x-gap{width:36px}
.t5-add{margin-top:12px; padding:9px 14px; border:1px dashed var(--line); border-radius:10px; background:none; color:var(--helia); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.t5-add:hover{border-color:var(--helia); background:rgba(238,108,45,.06)}

/* tick boxes: a drawn box over a real, focusable checkbox */
.t5-check{position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font-size:14px; cursor:pointer; user-select:none; transition:border-color .15s, background .15s}
.t5-check:hover{border-color:var(--grey)}
.t5-check input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.t5-box{display:inline-flex; align-items:center; justify-content:center; flex:none; width:20px; height:20px; box-sizing:border-box; border:2px solid var(--grey); border-radius:6px; background:var(--card); transition:background .15s, border-color .15s}
.t5-box::after{content:''; width:5px; height:10px; margin-top:-2px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); opacity:0}
.t5-check input:checked + .t5-box{background:var(--helia); border-color:var(--helia)}
.t5-check input:checked + .t5-box::after{opacity:1}
.t5-check:has(input:checked){border-color:var(--helia); background:rgba(238,108,45,.07)}
.t5-check input:focus-visible + .t5-box{outline:2px solid var(--helia); outline-offset:2px}
.t5-inspect{display:inline-flex; font-weight:600}

/* yes / no questions */
.t5-qs{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.t5-q{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; background:var(--card)}
.t5-q + .t5-q{border-top:1px solid var(--line-soft)}
.t5-qt{font-size:14px; line-height:1.4; color:var(--ink)}
.t5-eg{display:block; margin-top:2px; font-size:12px; color:var(--muted)}
.t5-yn{display:inline-flex; flex:none; gap:6px}
.t5-yn-opt{position:relative; cursor:pointer}
.t5-yn-opt input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.t5-yn-opt span{display:block; min-width:64px; padding:9px 0; border:1px solid var(--line); border-radius:9px; background:var(--card); text-align:center; font-size:13px; font-weight:700; color:var(--muted); transition:background .15s, border-color .15s, color .15s}
.t5-yn-opt:hover span{border-color:var(--grey); color:var(--ink)}
.t5-yes input:checked + span{background:var(--green); border-color:var(--green); color:#fff}
.t5-no input:checked + span{background:var(--red); border-color:var(--red); color:#fff}
.t5-yn-opt input:focus-visible + span{outline:2px solid var(--helia); outline-offset:2px}

/* hazards */
.t5-hazards{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px}
.t5-hz{gap:10px; padding:10px 12px; font-size:13px}
.t5-hn{min-width:20px; font-weight:800; color:var(--muted); font-variant-numeric:tabular-nums}
.t5-hz:has(input:checked) .t5-hn{color:var(--helia)}
.t5-hl{line-height:1.3}
.t5-other{margin-top:12px}
.t5-other[hidden]{display:none}

/* step 4: a box for each hazard ticked in step 3 */
.t5-text{margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--ink)}
.t5-ctls{display:flex; flex-direction:column; gap:10px}
.t5-ctl{display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--helia); border-radius:10px; background:var(--card); cursor:text}
.t5-ctl-h{display:flex; align-items:baseline; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink)}
.t5-ctl-h .t5-hn{color:var(--helia)}
.t5-ctl textarea{min-height:66px; line-height:1.45; resize:vertical}
.t5-none{margin:0; padding:14px; border:1px dashed var(--line); border-radius:10px; text-align:center; font-size:13px; color:var(--muted)}
.t5-note{margin:12px 0 14px; font-size:12px; font-style:italic; color:var(--muted)}
.t5-stop{margin-top:12px; padding:12px 14px; border:1px solid rgba(226,59,59,.35); border-radius:10px; background:rgba(226,59,59,.1); color:var(--red); font-size:13px; font-weight:800; line-height:1.45}
.t5-stop[hidden]{display:none}

/* step 5 */
.t5-final .t5-text{margin:0; padding:12px 14px; border-radius:10px; background:var(--navy-tint)}

/* answers still needed */
.t5-field.t5-missing input, .t5-field.t5-missing select, .t5-check.t5-missing{border-color:var(--red); box-shadow:0 0 0 3px rgba(226,59,59,.14)}
.t5-q.t5-missing{background:rgba(226,59,59,.06)}
.t5-q.t5-missing .t5-yn-opt span{border-color:var(--red)}

/* photos and files at the end of each step */
.t5-files{margin-top:18px; padding-top:14px; border-top:1px solid var(--line-soft)}
.t5-thumbs{display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; padding:0; list-style:none}
.t5-file{position:relative; display:flex; flex-direction:column; gap:5px; width:88px}
.t5-file img, .t5-ext{display:flex; align-items:center; justify-content:center; width:88px; height:88px; box-sizing:border-box; border:1px solid var(--line); border-radius:10px; background:var(--bg); object-fit:cover}
.t5-ext{font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--muted)}
.t5-fname{overflow:hidden; font-size:11.5px; color:var(--muted); white-space:nowrap; text-overflow:ellipsis}
.t5-fx{position:absolute; top:-8px; right:-8px; width:26px; height:26px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--card); color:var(--muted); font-size:16px; line-height:1; cursor:pointer; box-shadow:0 1px 3px rgba(16,24,40,.18)}
.t5-fx:hover{border-color:var(--red); color:var(--red)}
.t5-attach{position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border:1px dashed var(--line); border-radius:10px; color:var(--helia); font-size:13px; font-weight:700; cursor:pointer}
.t5-attach:hover{border-color:var(--helia); background:rgba(238,108,45,.06)}
.t5-attach:focus-within{outline:2px solid var(--helia); outline-offset:2px}
.t5-attach input{position:absolute; opacity:0; width:1px; height:1px; margin:0}
.t5-attach svg{flex:none; width:16px; height:16px}
.t5-fnote{margin:10px 0 0; font-size:12.5px; font-weight:600; line-height:1.5; color:var(--red)}

/* submit: the foot of the last step's card */
.t5-submit{display:flex; align-items:center; gap:14px; margin:20px -22px -20px; padding:14px 22px; border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); background:var(--bg)}
.t5-msg{flex:1; min-width:0; font-size:13px; font-weight:700; color:var(--muted)}
.t5-msg.err{color:var(--red)}
.t5-msg.ok{color:var(--green)}
#t5-submit{flex:none; padding:12px 22px; font-size:14px}

/* earlier records */
.t5-table td{vertical-align:top}
.t5-status{display:inline-block; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:700}
.t5-status.ok{color:var(--green); background:rgba(47,163,107,.12)}
.t5-status.wait{color:var(--amber); background:rgba(233,151,30,.14)}
.t5-status.bad{color:var(--red); background:rgba(226,59,59,.12)}
.t5-link{padding:0; border:0; background:none; font:inherit; font-size:12.5px; font-weight:700; color:var(--blue); cursor:pointer}
.t5-link:hover{text-decoration:underline}
.t5-link:disabled{color:var(--muted); cursor:default; text-decoration:none}

@media (max-width:640px){
  .t5-card{padding:16px}
  .t5-q{flex-direction:column; align-items:stretch; gap:10px}
  .t5-yn{display:grid; grid-template-columns:1fr 1fr}
  .t5-yn-opt span{min-width:0; padding:11px 0}
  .t5-hazards{grid-template-columns:1fr}
  .t5-submit{flex-wrap:wrap; margin:18px -16px -16px; padding:12px 16px}
  .t5-msg:empty{display:none}
  .t5-attach{display:flex; justify-content:center; padding:11px 14px}
  #t5-submit{flex:1 1 100%; justify-content:center}
}