/* training-videos.css -- session 315: Training > Videos and Settings > Handbook (training-videos.js). Existing tokens only. */
.trv .btn-sm, .hbk .btn-sm{ padding:4px 10px; font-size:12.5px; border-width:1.5px }
.trv .btn:disabled, .hbk .btn:disabled{ opacity:.45; cursor:default }
.trv-bar{ display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; margin-bottom:var(--s4) }
.trv-vid{ margin-bottom:var(--s4) }
.trv-vid.trv-hidden{ background:var(--line-soft) }
.trv-top{ display:flex; gap:var(--s4); align-items:flex-start; flex-wrap:wrap }
.trv-place{ flex:0 0 28px; height:28px; border-radius:50%; background:var(--teal-pale); color:var(--teal-deep); font-weight:600;
  font-size:13px; display:flex; align-items:center; justify-content:center }
.trv-main{ flex:1 1 260px; min-width:0 }
.trv-t{ font-size:15px; font-weight:600; color:var(--ink); overflow-wrap:anywhere }
.trv-es{ font-size:13px; margin-top:2px }
.trv-meta{ font-size:12.5px; margin-top:4px }
.trv-pill-hidden{ background:var(--gray-bg); color:var(--text) }
.trv-actions{ display:flex; gap:6px; flex-wrap:wrap }
.trv-sum{ font-size:13px; color:var(--text); margin:var(--s3) 0 6px }
.trv-bars{ display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--line-soft) }
.trv-bars i{ display:block; height:100% }
.trv-bars .c{ background:var(--teal-dark) }
.trv-bars .o{ background:var(--amber-text) }
.trv-who-btn{ background:none; border:none; padding:6px 0 0; color:var(--teal-dark); font:inherit; font-size:13px; font-weight:600; cursor:pointer }
.trv-who{ margin-top:4px }
.trv-grp{ font-size:13px; margin-top:8px; line-height:1.6 }
.trv-grp b{ display:block; font-weight:600 }
.trv-grp.trv-c b{ color:var(--green-text) }
.trv-grp.trv-o b{ color:var(--amber-text) }
.trv-grp.trv-n b{ color:var(--ink) }
.trv-form{ margin-bottom:var(--s5) }
.trv-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:4px }
.trv-form input[type=text], .trv-form textarea, .hbk input[type=text], .hbk textarea{ width:100%; box-sizing:border-box; font:inherit; font-size:14px }
.trv-chk{ display:flex !important; align-items:center; gap:8px; font-weight:500 !important; margin-bottom:var(--s4) }
.trv-form-btns{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin-top:var(--s3) }
.trv-msg{ font-size:13px; color:var(--muted) }
.hbk .card{ margin-bottom:var(--s5) }
.hbk label{ display:block; font-size:13px; font-weight:600; margin-bottom:4px }
.hbk textarea{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:12px; min-height:220px }
.hbk-steps{ margin:0 0 var(--s3) 18px; padding:0; font-size:13.5px; line-height:1.6 }
.hbk-facts{ font-size:13.5px; display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap }
.hbk-sum{ font-size:13.5px; margin-top:var(--s3) }
.hbk-draftline{ font-size:12.5px; margin-top:var(--s3) }
.hbk-frame-wrap{ margin-top:var(--s4); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white) }
.hbk-frame{ display:block; width:100%; height:640px; border:0 }
@media (max-width:640px){
  .trv .f2, .hbk .f2{ grid-template-columns:1fr }
  .trv-actions{ width:100% }
  .hbk-frame{ height:520px }
}
.hbk .tbl td, .hbk .tbl th{ white-space:normal; overflow:visible; text-overflow:clip }