/* Safety Courses shared narration player - built 2026-09-28 14:05 */

/* ---- SC-MHPLAYER-476 ---- */

/* SC-MHPLAYER-476: new narration player in the course's own visual language.
   Replaces the old black bar. Same ids, so the audio gate, resume, karaoke and
   speed logic are untouched - only the component is new. */
.mh-player.fcp{ margin:18px 0 0; }
.mh-player.fcp.hidden{ display:none; }
.fcp-bar{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:#fff; border:1px solid #e9ecef; border-radius:14px; box-shadow:0 6px 20px rgba(20,30,50,.07); }
.fcp-play{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:#fd6c01; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(253,108,1,.35); transition:background .15s, transform .12s; }
.fcp-play:hover{ background:#e15f00; } .fcp-play:active{ transform:scale(.96); }
.fcp-play .icon-pause{ display:none; } .fcp-play.playing .icon-play{ display:none; }
.fcp-play.playing .icon-pause{ display:block; }
.fcp-mid{ flex:1 1 auto; min-width:0; }
.fcp-lab{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.fcp-title{ font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#7a7a7a; }
.fcp-hint{ font-size:11.5px; color:#fd6c01; font-weight:700; }
.fcp-hint.hidden{ display:none; }
.fcp-seek{ position:relative; height:7px; border-radius:6px; background:#ececec; cursor:pointer; }
.fcp-seek-fill{ position:absolute; inset:0 auto 0 0; width:0; border-radius:6px; background:#fd6c01; }
.fcp-seek-fill:after{ content:''; position:absolute; right:-6px; top:50%; width:13px; height:13px; transform:translateY(-50%); border-radius:50%; background:#fd6c01; box-shadow:0 0 0 3px #fff; }
.fcp-time{ flex:0 0 auto; font-size:13px; font-weight:700; color:#53616a; font-variant-numeric:tabular-nums; }
.fcp-chip{ flex:0 0 auto; min-width:48px; height:32px; padding:0 10px; border-radius:9px; cursor:pointer; border:1.5px solid #e4e4e4; background:#fff; color:#2b2b2b; font-size:13px; font-weight:800; }
.fcp-chip:hover{ border-color:#fd6c01; background:#fff5ec; }
.fcp-chip.on{ background:#fd6c01; border-color:#fd6c01; color:#fff; }
.fcp-vol{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:9px; }
.fcp-volbtn{ display:flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer; color:#53616a; padding:0; }
.fcp-volbtn:hover{ color:#fd6c01; }
.fcp-volpct{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.fcp-voltrack{ position:relative; width:78px; height:6px; border-radius:6px; background:#ececec; cursor:pointer; }
.fcp-volfill{ position:absolute; inset:0 auto 0 0; width:50%; border-radius:6px; background:#7f95ad; }
.fcp-volpop{ display:none; }
@media (max-width:760px){
  .fcp-bar{ gap:10px; padding:10px 12px; flex-wrap:wrap; }
  .fcp-play{ width:40px; height:40px; }
  .fcp-mid{ order:3; flex:1 0 100%; }
  .fcp-voltrack{ width:56px; }
  .fcp-volpct{ display:none; }
  .fcp-chip{ min-width:44px; height:30px; font-size:12px; }
}


/* ---- SC-MHFOCUS-477 ---- */

/* SC-MHFOCUS-477: clicking a player button left the browser's blue focus ring
   drawn around the orange pill. Keep a focus ring for keyboard users only. */
.fcp-bar button:focus{ outline:none; box-shadow:none; }
.fcp-play:focus{ box-shadow:0 4px 12px rgba(253,108,1,.35); }
.fcp-bar button:focus-visible{ outline:2px solid #fd6c01; outline-offset:3px; }
.fc-opt:focus, .fc-check:focus, .mh-btn:focus{ outline:none; }
.fc-opt:focus-visible, .fc-check:focus-visible, .mh-btn:focus-visible{ outline:2px solid #fd6c01; outline-offset:2px; }


/* ---- SC-MHSPEEDMENU-478 ---- */

/* SC-MHSPEEDMENU-478 */
.fcp-speed{ position:relative; flex:0 0 auto; }
.fcp-chip.open{ border-color:#fd6c01; }
.fcp-menu{ position:absolute; bottom:calc(100% + 10px); right:0; z-index:60; min-width:132px; background:#fff; border:1px solid #e4e4e4; border-radius:12px; padding:7px; box-shadow:0 14px 34px rgba(20,30,50,.18); }
.fcp-menu[hidden]{ display:none; }
.fcp-menu:after{ content:''; position:absolute; top:100%; right:20px; border:7px solid transparent; border-top-color:#fff; }
.fcp-menu-h{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#9aa3ab; padding:4px 10px 7px; }
.fcp-mi{ display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer; padding:9px 11px; border-radius:8px; font-size:14px; font-weight:700; color:#2b2b2b; }
.fcp-mi:hover{ background:#fff5ec; color:#c2570a; }
.fcp-mi.sel{ background:#fd6c01; color:#fff; }
.fcp-mi:focus{ outline:none; } .fcp-mi:focus-visible{ outline:2px solid #fd6c01; outline-offset:-2px; }
@media (max-width:760px){ .fcp-menu{ right:auto; left:50%; transform:translateX(-50%); } .fcp-menu:after{ right:auto; left:50%; margin-left:-7px; } }


/* ---- SC-MHPOLISH-479 ---- */

/* SC-MHPOLISH-479: the slide progress bar was still the old blue while the rest
   of the course is orange; and cover-cropping at 25% could still clip the top of a head. */
.mh-progress, .fc-progress{ background:#ececec !important; }
.mh-progress-fill, .fc-progress-fill, .fc-progress > i, .mh-progress > div{ background:#fd6c01 !important; }
.fc-split .media img{ object-position:center top !important; }
.fc-card .ci img, .fc-scard .ci img{ object-position:center 20% !important; }


/* ---- SC-MHPROG-480 ---- */

/* SC-MHPROG-480: the bar was a bare stripe with no information on it. */
.fcp-prog{ padding:12px 16px 10px; background:#fff; border-bottom:1px solid #f0f2f4; }
.fcp-prog-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin-bottom:8px; flex-wrap:wrap; }
.fcp-prog-name{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#53616a; }
.fcp-prog-num{ font-size:12.5px; color:#7a7a7a; font-variant-numeric:tabular-nums; }
.fcp-prog-num b{ color:#fd6c01; font-size:14px; font-weight:800; }
.fcp-prog .mh-progress{ height:8px !important; border-radius:6px; background:#ececec !important; overflow:hidden; }
.fcp-prog .mh-progress-fill{ height:100%; border-radius:6px; background:#fd6c01 !important; transition:width .28s ease; }
@media (max-width:760px){ .fcp-prog{ padding:10px 12px 9px; } .fcp-prog-name{ font-size:11px; } .fcp-prog-num{ font-size:12px; } }


/* ---- SC-MHNEXTMOD-481 ---- */

/* SC-MHNEXTMOD-481: the rebuild dropped the Next Module button that used to sit
   inside the old summary slide. It now closes the quiz slide and unlocks on a correct answer. */
.fcp-endrow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid #ececec; }
.fcp-nextmod{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:11px; background:#fd6c01; color:#fff !important; font-size:15.5px; font-weight:800; text-decoration:none; box-shadow:0 6px 16px rgba(253,108,1,.32); transition:all .15s; }
.fcp-nextmod:hover{ background:#e15f00; transform:translateY(-1px); }
.fcp-nextmod.disabled{ background:#e4e4e4; color:#9aa3ab !important; box-shadow:none; pointer-events:none; cursor:default; }
.fcp-endhint{ font-size:13.5px; color:#7a7a7a; }
@media (max-width:760px){ .fcp-endrow{ gap:10px; } .fcp-nextmod{ width:100%; } }