/* training.css -- session 419 (briefs/session-419-brief.md Parts B, C; mh-lifecycle-mockups-v1 lifecycle.css, Training.dc.html, TrainingPerson.dc.html).
   The mockups' own section styles as classes, every value a token (tokens.css --lc-*). The header, band and filter card are core-header.css's (CHD).
     .trn   the Training page (#training): the board, one column per gate, each new cleaner's card; Past day 30; All in training; the planner
     .ptr   her Staff record's Training tab: the 8-step track, Step by step, Checked by QCs, Videos, Handbook (inside person-page.css's page)
     .trs   Settings > Training */

/* ---------------------------------------------------------------------------------------------- the Training page */
.trn{min-width:0}
.trn .trn-msg{margin:12px 0 0;font-size:13px;color:var(--ch-sub)}
.trn .trn-msg:empty{display:none}
.trn .trn-kan{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:14px;overflow-x:auto;padding:16px 0 4px}
.trn .trn-col{background:var(--lc-col);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:300px;min-width:0}
.trn .trn-colh{display:flex;align-items:center;gap:10px;padding:4px 4px 6px}
.trn .trn-gn{width:30px;height:30px;border-radius:50%;background:var(--lc-b700);color:#ffffff;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.trn .trn-colt{font-size:14.5px;font-weight:700;color:var(--lc-ink);line-height:1.2}
.trn .trn-colk{font-size:12px;color:var(--lc-muted)}
.trn .trn-colc{margin-left:auto;background:#ffffff;border-radius:999px;padding:1px 9px;font-size:12.5px;font-weight:700;color:var(--lc-ink)}
.trn .trn-kc{background:#ffffff;border-radius:14px;box-shadow:var(--lc-sh-card);padding:14px;display:flex;flex-direction:column;gap:9px;cursor:pointer;color:inherit;text-decoration:none;min-width:0}
.trn .trn-kc:hover{box-shadow:0 6px 18px rgba(14,54,59,.14)}
.trn .trn-kc:focus-visible{outline:2px solid var(--ch-acc);outline-offset:2px}
.trn .trn-top{display:flex;align-items:center;gap:10px;min-width:0}
.trn .trn-av{width:36px;height:36px;border-radius:50%;background:var(--lc-y500);color:var(--lc-ink);font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.trn .trn-nm{font-size:15px;font-weight:700;color:var(--lc-ink);overflow-wrap:anywhere}
.trn .trn-cap{font-size:12px;color:var(--lc-muted)}
.trn .trn-dbar{height:7px;border-radius:99px;background:var(--lc-surface-2);overflow:hidden}
.trn .trn-dbar i{display:block;height:100%;background:var(--lc-b500);border-radius:99px}
.trn .trn-dbar i.trn-late{background:var(--lc-o500)}
.trn .trn-gates{display:flex;gap:4px;min-width:96px}
.trn .trn-gates span{flex:1 1 0;height:6px;border-radius:99px;background:var(--lc-surface-2)}
.trn .trn-gates span.ok{background:var(--lc-g600)}
.trn .trn-gates span.now{background:var(--lc-y500)}
.trn .trn-ln{font-size:13px;color:var(--lc-text);line-height:1.4}
.trn .trn-empty{border:2px dashed var(--lc-line-strong);border-radius:14px;padding:18px;text-align:center;color:var(--lc-muted);font-size:13px}
.trn .trn-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:normal;align-self:flex-start;line-height:1.35}
.trn .trn-p-g{background:var(--lc-g100);color:var(--lc-on-g)}
.trn .trn-p-o{background:var(--lc-o100);color:var(--lc-on-o)}
.trn .trn-p-a{background:var(--lc-a100);color:var(--lc-on-a)}
.trn .trn-p-t{background:var(--lc-b100);color:var(--lc-b700)}
.trn .trn-p-p{background:var(--lc-p100);color:var(--lc-on-p)}
.trn .trn-p-n{background:var(--lc-surface-2);color:var(--lc-text)}
.trn .trn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--lc-line-strong);background:#ffffff;color:var(--lc-ink);font:600 13px 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.trn .trn-btn:hover{background:var(--lc-surface-2)}
.trn .trn-btn:focus-visible{outline:2px solid var(--lc-b300);outline-offset:2px}
.trn .trn-btn[disabled]{opacity:.55;cursor:not-allowed}
.trn .trn-btn.trn-btn-t{background:var(--lc-b700);border-color:var(--lc-b700);color:#ffffff}
.trn .trn-btn.trn-btn-t:hover{background:var(--lc-b900)}
.trn .trn-btn.trn-full{width:100%}
.trn .trn-sec{display:flex;align-items:center;gap:12px;padding:18px 6px 10px;flex-wrap:wrap}
.trn .trn-sec h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--lc-ink)}
.trn .trn-sec .trn-cap{font-size:12.5px}
.trn .trn-sec a{margin-left:auto;font-weight:600;text-decoration:underline;color:var(--lc-b500)}
.trn .trn-tbx{overflow-x:auto}
.trn .trn-tbl{width:100%;border-collapse:separate;border-spacing:0;min-width:880px}
.trn .trn-tbl th{text-align:left;font-size:13px;font-weight:600;color:var(--ch-sub);padding:12px 16px;background:var(--ch-tag-bg);white-space:nowrap;text-transform:none;letter-spacing:normal}
.trn .trn-tbl th:first-child{border-radius:10px 0 0 10px}
.trn .trn-tbl th:last-child{border-radius:0 10px 10px 0}
.trn .trn-tbl td{padding:13px 16px;border-bottom:1px solid var(--ch-row-line);vertical-align:middle;font-size:14px;color:var(--ch-cell);white-space:normal}
.trn .trn-tbl tbody tr.trn-tr{cursor:pointer}
.trn .trn-tbl tbody tr.trn-tr:hover td{background:#f5f7f8}
.trn .trn-tbl tbody tr.trn-tr:focus-visible{outline:2px solid var(--ch-acc);outline-offset:-2px}
.trn .trn-tbl tr.trn-band td{background:var(--lc-grp);font-size:13px;font-weight:700;color:var(--lc-ink);padding:10px 16px}
.trn .trn-who{display:flex;align-items:center;gap:12px}
.trn .trn-a{font-size:15px;font-weight:700;color:var(--lc-b500);text-decoration:underline;text-decoration-color:var(--ch-line);text-underline-offset:3px}
.trn .trn-a:hover{color:var(--lc-b700);text-decoration-color:currentColor}
.trn .trn-sub{font-size:13px;color:var(--lc-muted);margin-top:2px}
.trn .trn-late{color:var(--lc-on-o);font-weight:700}
.trn .trn-stuck{color:var(--lc-ink);font-weight:600}
.trn .trn-none{padding:18px 14px;color:var(--ch-sub);font-size:14px}
.trn .trn-drill td{padding:0 16px 12px;border-bottom:1px solid var(--ch-row-line);background:#fbfcfc}
.trn .trn-gbtn{display:flex;gap:4px;width:140px;padding:6px 0;background:none;border:0;cursor:pointer}
.trn .trn-gbtn span{flex:1 1 0;height:8px;border-radius:99px;background:var(--lc-surface-2)}
.trn .trn-gbtn span.ok{background:var(--lc-g600)}
.trn .trn-gbtn span.now{background:var(--lc-y500)}
.trn .trn-gbtn:focus-visible{outline:2px solid var(--ch-acc);outline-offset:2px}
.trn .trn-sortn{font-size:13px;color:var(--ch-sub)}

/* the planner (Plan a training clean, and each Plan button), a box over the page */
.trp{position:fixed;inset:0;z-index:60;background:rgba(14,54,59,.38);display:flex;align-items:flex-start;justify-content:center;padding:60px 16px;overflow:auto}
.trp .trp-box{background:#ffffff;border-radius:16px;box-shadow:0 18px 48px rgba(14,54,59,.28);width:640px;max-width:100%;padding:22px 22px 18px;font-size:14px;color:var(--lc-text)}
.trp .trp-h{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.trp .trp-h h2{margin:0;font-size:20px;font-weight:700;color:var(--lc-ink);letter-spacing:-.02em}
.trp .trp-x{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;color:var(--lc-muted);cursor:pointer;padding:2px 6px;border-radius:8px}
.trp .trp-x:hover{background:var(--lc-surface-2)}
.trp .trp-x:focus-visible{outline:2px solid var(--lc-b300)}
.trp .trp-cap{font-size:13px;color:var(--lc-muted);margin:2px 0 10px}
.trp .trp-lab{display:block;font-size:12.5px;font-weight:600;color:var(--ch-sub);margin:12px 0 6px}
.trp .trp-sel{height:38px;width:100%;border:1px solid var(--lc-line-strong);border-radius:9px;padding:0 8px;font:450 14px 'Inter',system-ui,sans-serif;color:var(--lc-ink);background:#ffffff}
.trp .trp-in{height:38px;width:100%;border:1px solid var(--lc-line-strong);border-radius:9px;padding:0 10px;font:450 14px 'Inter',system-ui,sans-serif;color:var(--lc-ink)}
.trp .trp-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow:auto;margin-top:4px}
.trp .trp-opt{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--lc-line);border-radius:12px;background:#ffffff;padding:10px 12px;cursor:pointer;font:inherit;color:inherit}
.trp .trp-opt:hover{background:#f5f7f8}
.trp .trp-opt:focus-visible{outline:2px solid var(--lc-b300);outline-offset:1px}
.trp .trp-opt.on{border-color:var(--lc-b500);box-shadow:inset 0 0 0 1px var(--lc-b500);background:var(--lc-b100)}
.trp .trp-opt.trp-off{opacity:.72}
.trp .trp-ow{flex:1 1 auto;min-width:0}
.trp .trp-ot{font-weight:700;color:var(--lc-ink)}
.trp .trp-os{font-size:12.5px;color:var(--lc-muted);margin-top:2px}
.trp .trp-fit{font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;background:var(--lc-g100);color:var(--lc-on-g);white-space:nowrap}
.trp .trp-nofit{font-size:12px;font-weight:600;border-radius:999px;padding:2px 9px;background:var(--lc-surface-2);color:var(--lc-text);white-space:nowrap}
.trp .trp-acts{display:flex;gap:10px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
.trp .trp-err{margin-top:10px;color:var(--lc-on-o);font-weight:600;font-size:13px}
.trp .trp-err:empty{display:none}
.trp .trp-none{padding:12px;border:2px dashed var(--lc-line-strong);border-radius:12px;color:var(--lc-muted);font-size:13px}
.trp .trp-q{white-space:pre-wrap;background:var(--lc-grp);border-radius:12px;padding:12px;font-size:13.5px;color:var(--lc-ink);line-height:1.45;max-height:220px;overflow:auto}
.trp .trp-rad{display:flex;gap:8px;flex-wrap:wrap}
.trp .trp-rad label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--lc-line-strong);border-radius:10px;padding:7px 10px;cursor:pointer}
.trp .trp-ta{width:100%;min-height:70px;border:1px solid var(--lc-line-strong);border-radius:9px;padding:8px 10px;font:450 14px 'Inter',system-ui,sans-serif;color:var(--lc-ink);resize:vertical}
.trp .trp-btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--lc-line-strong);background:#ffffff;color:var(--lc-ink);font:600 14px 'Inter',system-ui,sans-serif;cursor:pointer}
.trp .trp-btn:hover{background:var(--lc-surface-2)}
.trp .trp-btn:focus-visible{outline:2px solid var(--lc-b300);outline-offset:2px}
.trp .trp-btn[disabled]{opacity:.55;cursor:not-allowed}
.trp .trp-btn.trp-main{background:var(--ch-yellow);border-color:var(--ch-yellow);color:var(--ch-yellow-ink);font-weight:700;box-shadow:var(--lc-sh-action)}
.trp .trp-btn.trp-main:hover{background:var(--ch-yellow-hover)}

/* ---------------------------------------------------------------------------------------------- her Staff record, Training tab */
.ptr{display:flex;flex-direction:column;gap:18px}
.ptr .ptr-card{background:#ffffff;border-radius:14px;box-shadow:var(--lc-sh-card);padding:22px}
.ptr .ptr-shd{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.ptr .ptr-shd h2{margin:0;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--lc-ink)}
.ptr .ptr-right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ptr .ptr-isq{width:40px;height:40px;border-radius:12px;background:var(--lc-b100);color:var(--lc-b700);display:flex;align-items:center;justify-content:center;flex:none}
.ptr .ptr-cap{font-size:12.5px;color:var(--lc-muted)}
.ptr .ptr-trackw{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;margin-top:8px}
.ptr .ptr-trackw::before{content:"";position:absolute;left:6%;right:6%;top:23px;height:4px;background:var(--lc-surface-2);border-radius:99px}
.ptr .ptr-fill{position:absolute;left:6%;top:23px;height:4px;background:var(--lc-g600);border-radius:99px}
.ptr .ptr-node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:0}
.ptr .ptr-dot{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;background:#ffffff;border:3px solid var(--lc-line);color:var(--lc-muted)}
.ptr .ptr-dot.ptr-call{width:38px;height:38px;margin-top:6px;border-radius:12px;font-size:13px}
.ptr .ptr-dot.ptr-ok{background:var(--lc-g600);border-color:var(--lc-g600);color:#ffffff}
.ptr .ptr-dot.ptr-now{background:var(--lc-y500);border-color:var(--lc-y500);color:var(--lc-ink);box-shadow:0 0 0 6px var(--lc-y100)}
.ptr .ptr-dot.ptr-next{border-color:var(--lc-b700);color:var(--lc-b700)}
.ptr .ptr-dot.ptr-lt{border-color:var(--lc-o500);color:var(--lc-on-o)}
.ptr .ptr-nt{font-size:13px;font-weight:700;color:var(--lc-ink);line-height:1.25;overflow-wrap:anywhere}
.ptr .ptr-ns{font-size:12px;color:var(--lc-muted);line-height:1.3}
.ptr .ptr-ns.ptr-lt{color:var(--lc-on-o);font-weight:600}
.ptr .ptr-days{display:flex;justify-content:space-between;margin-top:18px;font-size:12px;color:var(--lc-muted);gap:8px}
.ptr .ptr-days b{color:var(--lc-ink)}
.ptr .ptr-dbar{height:8px;border-radius:99px;background:var(--lc-surface-2);overflow:hidden;margin-top:6px}
.ptr .ptr-dbar i{display:block;height:100%;background:var(--lc-b500)}
.ptr .ptr-dbar i.ptr-late{background:var(--lc-o500)}
.ptr .ptr-g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.ptr .ptr-s8{grid-column:span 8;min-width:0}
.ptr .ptr-s4{grid-column:span 4;min-width:0;display:flex;flex-direction:column;gap:18px}
.ptr .ptr-step{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--lc-line);align-items:center;flex-wrap:wrap}
.ptr .ptr-sk{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none;background:var(--lc-surface-2);color:var(--lc-muted)}
.ptr .ptr-sk.ptr-ok{background:var(--lc-g100);color:var(--lc-g600)}
.ptr .ptr-sk.ptr-now{background:var(--lc-y500);color:var(--lc-ink)}
.ptr .ptr-sk.ptr-lt{background:var(--lc-o100);color:var(--lc-on-o)}
.ptr .ptr-sm{flex:1 1 300px;min-width:0}
.ptr .ptr-st{font-size:15px;font-weight:700;color:var(--lc-ink)}
.ptr .ptr-sub{font-size:13px;color:var(--lc-muted);margin-top:3px;line-height:1.4}
.ptr .ptr-sub.ptr-ltw{color:var(--lc-on-o)}
.ptr .ptr-grade{font-size:24px;font-weight:800;color:var(--lc-ink);min-width:48px;text-align:right}
.ptr .ptr-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ptr .ptr-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ptr .ptr-p-g{background:var(--lc-g100);color:var(--lc-on-g)}
.ptr .ptr-p-o{background:var(--lc-o100);color:var(--lc-on-o)}
.ptr .ptr-p-a{background:var(--lc-a100);color:var(--lc-on-a)}
.ptr .ptr-p-t{background:var(--lc-b100);color:var(--lc-b700)}
.ptr .ptr-p-p{background:var(--lc-p100);color:var(--lc-on-p)}
.ptr .ptr-p-n{background:var(--lc-surface-2);color:var(--lc-text)}
.ptr .ptr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--lc-line-strong);background:#ffffff;color:var(--lc-ink);font:600 13px 'Inter',system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.ptr .ptr-btn:hover{background:var(--lc-surface-2)}
.ptr .ptr-btn:focus-visible{outline:2px solid var(--lc-b300);outline-offset:2px}
.ptr .ptr-btn[disabled]{opacity:.55;cursor:not-allowed}
.ptr .ptr-btn.ptr-btn-t{background:var(--lc-b700);border-color:var(--lc-b700);color:#ffffff}
.ptr .ptr-btn.ptr-btn-t:hover{background:var(--lc-b900)}
.ptr .ptr-btn.ptr-btn-y{background:var(--ch-yellow);border-color:var(--ch-yellow);color:var(--ch-yellow-ink);font-weight:700}
.ptr .ptr-btn.ptr-btn-y:hover{background:var(--ch-yellow-hover)}
.ptr .ptr-lnk{background:none;border:0;padding:0;font:600 13px 'Inter',system-ui,sans-serif;color:var(--lc-b500);text-decoration:underline;cursor:pointer}
.ptr .ptr-lnk:focus-visible{outline:2px solid var(--lc-b300);outline-offset:2px}
.ptr .ptr-edit{flex-basis:100%;margin:4px 0 0 54px;min-width:0}
.ptr .ptr-edit table{width:100%}
.ptr .ptr-rowl{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--lc-line);flex-wrap:wrap}
.ptr .ptr-rowl.ptr-first{border-top:0}
.ptr .ptr-rmain{flex:1 1 200px;min-width:0}
.ptr .ptr-rt{font-size:15px;font-weight:700;color:var(--lc-ink)}
.ptr .ptr-rs{font-size:13px;color:var(--lc-muted);margin-top:2px}
.ptr .ptr-vbar{height:10px;border-radius:99px;background:var(--lc-surface-2);overflow:hidden}
.ptr .ptr-vbar i{display:block;height:100%;background:var(--lc-g600)}
.ptr .ptr-msg{font-size:13px;color:var(--lc-on-o);font-weight:600;margin-top:6px}
.ptr .ptr-msg:empty{display:none}
@media (max-width:900px){
  .ptr .ptr-s8,.ptr .ptr-s4{grid-column:span 12}
  .ptr .ptr-trackw{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:18px}
  .ptr .ptr-trackw::before,.ptr .ptr-fill{display:none}
  .ptr .ptr-edit{margin-left:0}
  .ptr .ptr-card{padding:16px}
}

/* ---------------------------------------------------------------------------------------------- Settings > Training */
.trs .trs-grid{display:flex;flex-direction:column}
.trs .trs-h{font-size:15px;font-weight:700;color:var(--lc-ink);margin:18px 0 4px}
.trs .trs-row{display:flex;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--ch-row-line);flex-wrap:wrap}
.trs .trs-w{flex:1 1 320px;min-width:0;color:var(--lc-ink)}
.trs input.trs-n,.trs .trs-n{height:36px;width:84px;border:1px solid var(--lc-line-strong);border-radius:9px;padding:0 10px;font:450 14px 'Inter',system-ui,sans-serif;color:var(--lc-ink)}
.trs .trs-u{font-size:13px;color:var(--lc-muted);min-width:60px}
.trs .trs-save{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.trs .trs-msg{font-size:13px;color:var(--lc-muted)}
.trs .trs-tbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:13.5px}
.trs .trs-tbl td,.trs .trs-tbl th{padding:8px 10px;border-top:1px solid var(--ch-row-line);text-align:left}

@media (max-width:760px){
  .trn .trn-kan{grid-template-columns:repeat(5,minmax(240px,1fr))}
  .trp{padding:16px 10px}
  .trp .trp-box{padding:16px}
}

/* Session 422 (brief H): Already fully trained? Certify her. */
.trn-cert{ display:flex; flex-direction:column; gap:6px; align-items:flex-start }
.trn-certbox{ padding:10px 12px; border-radius:10px; background:#fff8e1; box-shadow:inset 0 0 0 1px #f1dc8a }
.trn-certh{ font-weight:800; font-size:14px }
.trn-certl{ margin:0; padding-left:18px; font-size:13px }
.trn-certb{ display:flex; flex-wrap:wrap; gap:8px }