/* round 7 module (training), built by B4: existing variables only (var(--ink) … var(--on-accent,#fff)), no hex colours.
   Training & Cal page (js/training.js): Start-check strip, people × skills matrix, calibration list, "What the floor sees" cards, dialogs. */
.tc-page{display:flex;flex-direction:column;gap:14px}
.tc-page .card{margin:0}
.tc-sp{flex:1}

/* Start check strip */
.tc-gate{display:flex;align-items:flex-start;gap:12px;padding:10px 16px;border-left:4px solid var(--rule-hi, var(--rule))}
.tc-gate .howto{margin-top:4px} .tc-gate .howto summary{cursor:pointer;font-size:12px;color:var(--ink2)} .tc-gate .howto p{margin:4px 0}
.tc-gate.on{border-left-color:var(--red);background:var(--red-l)}
.tc-gate b{font-size:14px}

/* card head (mockup .ch) */
.tc-card{padding:0;overflow:hidden}
.tc-ch{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:11px 16px;border-bottom:1px solid var(--rule2);min-width:0}
.tc-ch h3{margin:0;font-size:16px;font-weight:700;white-space:nowrap}
.tc-ch .btn,.tc-ch .tc-cnt,.tc-ch .tc-ret{flex:none}
.tc-m{color:var(--ink2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tc-ch2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 16px;border-bottom:1px solid var(--rule2)}
.tc-ch input:not([type=checkbox]),.tc-ch select,.tc-ch2 input,.tc-ch2 select{height:28px;padding:0 8px;border:1px solid var(--rule);border-radius:6px;background:var(--field, var(--paper));color:var(--ink);font:inherit;font-size:12.5px}
.tc-ch2 input{width:200px}
.tc-ch2 select{width:auto;max-width:210px}
.tc-cnt{font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:4px;white-space:nowrap}
.tc-cnt.exp{background:var(--red-l);color:var(--red-t, var(--red))}
.tc-cnt.soon{background:var(--amber-l);color:var(--amber-t, var(--ink))}
.tc-cnt.trn{background:var(--blue-l);color:var(--blue-t, var(--ink))}

/* tables */
.tc-wrap{overflow:auto;max-height:62vh}
.tc-mxwrap{max-height:none;overflow-x:auto;overflow-y:hidden}   /* the matrix flows with the page; only a wide matrix scrolls sideways */
.tc-page table{font-size:13px}
.tc-page th{font-size:11.5px;letter-spacing:.04em;padding:7px 8px}
.tc-page td{padding:4px 8px}
.tc-mx th.k{text-align:center;white-space:nowrap;text-transform:none;letter-spacing:0;font-size:12px;min-width:74px;max-width:120px;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.tc-mx td.k{text-align:center;cursor:pointer;padding:3px 4px;height:30px;box-sizing:border-box}
.tc-mx td.k:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--indigo, var(--ink3))}
.tc-mx .tc-who{white-space:nowrap;width:170px;min-width:150px;max-width:190px;position:sticky;left:0;background:var(--paper);z-index:1}
.tc-mx th.tc-who{z-index:3;background:var(--paper2)}
.tc-mx .tc-who b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis}
.tc-mx .tc-who span{display:block;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.tc-req{color:var(--red);font-size:11px;vertical-align:middle}

/* matrix cells: valid / expires soon / expired / in training / not trained */
.tc-c{display:inline-block;min-width:64px;font-size:11.5px;line-height:1;font-weight:500;font-variant-numeric:tabular-nums;padding:5px 6px;border-radius:4px;white-space:nowrap}
.tc-c.ok{background:var(--green-l);color:var(--green-t, var(--green))}
.tc-c.soon{background:var(--amber-l);color:var(--amber-t, var(--ink));box-shadow:inset 0 0 0 1px var(--amber-bd, var(--amber))}
.tc-c.exp{background:var(--red-l);color:var(--red-t, var(--red));font-weight:600;box-shadow:inset 0 0 0 1px var(--red)}
.tc-c.trn{background:var(--blue-l);color:var(--blue-t, var(--blue));font-weight:600}
.tc-c.no{min-width:0;border:1px dashed var(--rule)}
.tc-c sup{font-size:11px;margin-left:3px;font-weight:700}
.tc-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:8px 16px;font-size:11.5px;color:var(--ink2);border-top:1px solid var(--rule2)}
.tc-legend i{font-style:normal;display:flex;gap:6px;align-items:center}
.tc-legend .tc-c{min-width:0;width:14px;height:14px;padding:0;box-sizing:border-box}

/* calibration + floor preview row */
.tc-row{display:grid;grid-template-columns:1.05fr 1fr;gap:14px}
@media (max-width:1250px){.tc-row{grid-template-columns:1fr}}
.tc-ret{display:flex;gap:5px;align-items:center;white-space:nowrap}
.tc-cal tr.tc-ed{cursor:pointer}
.tc-cal tr.tc-ed:hover td{background:var(--hover)}
.tc-cal tr.bad td{background:var(--red-l)}
.tc-cal td b{font-size:13px;margin-right:6px}
.tc-dt{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink2)}
.tc-cal td.r{text-align:right}
.tc-id{font:500 12px var(--mono);color:var(--ink2)}
.tc-due{color:var(--ink)}
.tc-st{font-size:11.5px;font-weight:600;line-height:1;padding:4px 8px;border-radius:4px;white-space:nowrap;display:inline-block}
.tc-st.ok{background:var(--green-l);color:var(--green-t, var(--green))}
.tc-st.soon{background:var(--amber-l);color:var(--amber-t, var(--ink))}
.tc-st.over{background:var(--red);color:var(--red-ink, var(--on-accent, var(--paper)))}
.tc-st.off{background:var(--grey-l);color:var(--ink2)}

.tc-ops{padding:9px 12px;display:flex;flex-direction:column;gap:8px}
.tc-op{border:1px solid var(--rule);border-left:4px solid var(--red);border-radius:8px;padding:7px 12px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.tc-op.warn{border-left-color:var(--amber)}
.tc-op .t{font-weight:700;font-size:13px}
.tc-op .t span{font-size:12px;font-weight:500;color:var(--ink2);margin-left:6px}
.tc-op .d{font-size:12px;color:var(--ink2)}
.tc-op .msg{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;background:var(--red-l);color:var(--red-t, var(--red));border-radius:6px;padding:6px 9px;font-size:12px}
.tc-op.warn .msg{background:var(--amber-l);color:var(--amber-t, var(--ink))}
.tc-op .msg span{font-weight:500}
.tc-acts{display:flex;gap:6px;align-items:center}

/* Start blocked dialog + forms */
.tc-msg{background:var(--red-l);color:var(--red-t, var(--red));border-radius:8px;padding:9px 12px;display:flex;flex-direction:column;gap:5px;font-size:13px;margin:8px 0}
.tc-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:10px 0}
.tc-form label{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink2);font-weight:600}
.tc-form label.wide{grid-column:1/-1}
.tc-form input,.tc-form select{font:inherit;font-size:13.5px;padding:6px 8px;border:1px solid var(--rule);border-radius:6px;background:var(--field, var(--paper));color:var(--ink)}
.tc-form input:disabled{background:var(--paper2);color:var(--ink2)}
.tc-hist{border-top:1px solid var(--rule2);padding-top:8px;margin-top:4px;display:flex;flex-direction:column;gap:3px;max-height:150px;overflow:auto}
.tc-skills{max-height:56vh}
.tc-skills input{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--rule);border-radius:5px;background:var(--field, var(--paper));color:var(--ink)}
.tc-skills td.c{text-align:center}
.tc-skills summary{cursor:pointer;font-size:12px;color:var(--ink2);max-width:260px}
.tc-cellgrid{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;padding:6px 0;font-size:11.5px;min-width:380px}
.tc-cellgrid label{display:flex;gap:5px;align-items:center;font-weight:500}
@media (max-width:1250px){.tc-mx th.k{min-width:62px} .tc-mx .tc-who{width:150px;min-width:130px} .tc-c{min-width:56px}}