/* Training records, in-person sessions, the expiry list and "My training
   record" (academy/w2-records). Every colour is a token from styles.css, so the
   dark theme and tenant accents follow; status chips pair a glyph and a label
   with colour, never colour alone. Nothing here may push the page wider than
   its viewport (390px and 320px included), and every control a thumb uses on a
   tailgate is at least 44px tall. */

.rec-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;line-height:1.3;
  padding:2px 9px;border-radius:999px;border:1px solid var(--edge);background:var(--raise);color:var(--ink-2);white-space:nowrap}
.rec-glyph{font-size:11px}
.rec-chip-expired,.rec-chip-absent{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
.rec-chip-expiring{background:var(--accent-wash);border-color:var(--accent-deep);color:var(--accent-deep)}
.rec-chip-current,.rec-chip-attended{background:var(--good-wash);border-color:var(--good);color:var(--good)}
.rec-chip-voided,.rec-chip-cancelled,.rec-chip-excused{background:var(--raise);border-color:var(--edge);color:var(--ink-2)}
.rec-chip-invited{background:transparent;border-style:dashed;color:var(--ink-2)}

/* ---- forms ---- */
.rec-form-mount:empty{display:none}
.rec-form{margin:12px 0 4px}
.rec-fields{border:1px solid var(--edge);border-radius:12px;padding:14px;margin:0;display:grid;gap:12px;min-width:0;background:var(--raise)}
.rec-fields legend{font-weight:800;color:var(--ink);padding:0 6px}
.rec-field{display:grid;gap:5px;min-width:0}
.rec-field[hidden],.rec-trainer-other[hidden]{display:none}
.rec-field label,.rec-trainer label{margin:0;color:var(--ink-2)}
.rec-trainer{display:grid;gap:5px;min-width:0}
.rec-trainer-other{display:grid;gap:5px;margin-top:6px}
.rec-page input:not([type=checkbox]):not([type=file]),.rec-page select,.rec-page textarea,
.rec-panel input:not([type=checkbox]):not([type=file]),.rec-panel select,.rec-panel textarea,
.rec-session-page input:not([type=checkbox]):not([type=file]),.rec-session-page select,.rec-session-page textarea{
  font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--edge);border-radius:8px;
  padding:9px 11px;min-height:44px;width:100%;min-width:0;max-width:100%;box-sizing:border-box;color-scheme:light dark;margin:0}
.rec-page textarea,.rec-panel textarea,.rec-session-page textarea{resize:vertical}
.rec-hint{font-size:13px;color:var(--mute);margin:2px 0 0}
.rec-buttons{display:flex;flex-wrap:wrap;gap:8px}
.rec-buttons .btn,.rec-tools .btn,.rec-void .btn,.rec-downloads .btn,.rec-mine .rec-card .btn{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:700px){
  .rec-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-fields legend,.rec-fields .rec-buttons,.rec-fields .rec-msg,.rec-fields .rec-field:has(textarea){grid-column:1/-1}
}
.rec-msg:empty{display:none}
.rec-msg .notice{margin-top:8px}

/* ---- tools and lists ---- */
.rec-tools,.rec-controls{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;margin:10px 0}
.rec-controls .rec-field{flex:0 1 14rem}
.rec-inline{grid-template-columns:auto minmax(0,10rem);align-items:center;gap:8px}
.rec-downloads{display:flex;flex-wrap:wrap;gap:8px}
.rec-downloads a.btn,.rec-tools a.btn,.rec-controls a.btn,.rec-card a.btn{color:var(--ink);text-decoration:none}
.rec-totals{font-weight:700;color:var(--ink-2);margin:6px 0 10px}
.rec-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.rec-card{border:1.5px solid var(--edge);border-radius:12px;padding:12px 14px;background:var(--surface);min-width:0;overflow-wrap:anywhere}
.rec-card.is-voided{border-style:dashed;background:var(--raise)}
.rec-card.is-voided .rec-title{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-2)}
.rec-card-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.rec-kind{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-deep)}
.rec-title{margin:0;font-size:16px;line-height:1.3;flex:1 1 12rem;min-width:0}
.rec-title a{color:var(--ink)}
.rec-facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:6px 14px;margin:10px 0 6px}
.rec-facts-wide{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.rec-facts div{min-width:0}
.rec-facts dt{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.rec-facts dd{margin:2px 0 0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.rec-status{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0;color:var(--ink-2);font-size:14px}
.rec-notes{margin:6px 0;color:var(--ink-2);font-size:14px;white-space:pre-wrap}
.rec-files{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:4px}
.rec-files li{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;min-height:32px}
.rec-files a{color:var(--accent-deep);font-weight:650;overflow-wrap:anywhere}
.rec-file-meta{font-size:12px;color:var(--mute)}
.rec-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rec-actions .btn{min-height:44px;display:inline-flex;align-items:center}
.rec-upload{cursor:pointer}
.rec-upload.is-busy{opacity:.7;pointer-events:none}
input[type=file].sr-only:focus-visible+.rec-upload{outline:3px solid var(--accent-deep);outline-offset:2px}
.rec-void{display:grid;gap:8px;margin-top:10px;max-width:34rem}
.rec-void[hidden]{display:none}
.rec-void .btn{justify-self:start}
.rec-voided{margin-top:14px}
.rec-voided summary{min-height:44px;display:flex;align-items:center;font-weight:700;cursor:pointer;color:var(--ink-2)}
.rec-voided summary:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}

/* ---- expiry and transcript tables ---- */
.rec-table td{vertical-align:top;overflow-wrap:anywhere}
.rec-table .rec-sub,.rec-who .rec-sub{display:block;font-size:12.5px;color:var(--mute);font-weight:600}
.rec-person{color:var(--accent-deep);font-weight:700}
.rec-item{font-weight:650}
@media (max-width:640px){.rec-table td .rec-sub{text-align:right}}
.rec-section{margin-top:22px}
.rec-section h2{font-size:18px;margin:0 0 8px}
.rec-plain{margin:0;padding-left:18px;display:grid;gap:6px}
.rec-plain li{overflow-wrap:anywhere}

/* ---- the roster, marked on a phone ---- */
.rec-roster-list{list-style:none;margin:10px 0 0;padding:0}
.rec-person-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 0;border-top:1px solid var(--grid)}
.rec-person-row:last-child{border-bottom:1px solid var(--grid)}
.rec-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.rec-name{font-weight:750;color:var(--ink);overflow-wrap:anywhere}
.rec-who .rec-sub{flex-basis:100%;order:2}
.rec-marks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.btn.rec-mark{min-height:48px;padding:6px 4px;justify-content:center;text-align:center;white-space:normal;line-height:1.15;font-size:14px}
.btn.rec-mark[aria-pressed=true]{font-weight:800}
.btn.rec-mark-attended[aria-pressed=true]{background:var(--good-wash);border-color:var(--good);color:var(--good)}
.btn.rec-mark-absent[aria-pressed=true]{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}
.btn.rec-mark-excused[aria-pressed=true]{background:var(--raise);border-color:var(--ink-2);color:var(--ink)}
.btn.rec-mark[aria-pressed=true]::before{content:"✓ ";font-weight:900}
.btn.rec-mark:disabled{opacity:.55}
.rec-remove{justify-self:start;min-height:40px}
.rec-person-row .rec-hint{margin:0}
.rec-roster>.btn{min-height:44px;margin:4px 0 6px}
@media (min-width:700px){
  .rec-person-row{grid-template-columns:minmax(0,1fr) minmax(0,22rem) auto;align-items:center}
  .rec-person-row .rec-hint{grid-column:1/-1}
}
.rec-invite .assign-roster{margin:10px 0}
.rec-invite .assign-person{min-height:44px;align-items:center}
.rec-invite>.btn{min-height:44px}