/* MCPL dashboard presentation (welcome banner + sidebar). Presentation only:
   no original rule, script, id, handler or data flow is changed. The banner's
   white / sky-blue `background` declaration (mcpl-v70-hero-final) is not
   touched; the trainer is an extra layer on top of it. */

/* ---------- 1. Welcome banner: trainer layer ---------- */
/* The banner's ::before used to draw the large white ring at the top right,
   exactly where the trainer now stands; it is reused for the trainer image. */
#dashboardPage .hero-dash::before{
 content:""!important;position:absolute!important;z-index:1!important;
 left:auto!important;right:3.5%!important;top:auto!important;bottom:0!important;
 width:148px!important;height:240px!important;
 border:0!important;border-radius:0!important;box-shadow:none!important;transform:none!important;
 background:url('mcpl-dashboard-trainer.png') center bottom/contain no-repeat!important;
 opacity:.9!important;pointer-events:none!important;
 /* feathered top and left edges so the photo melts into the banner */
 -webkit-mask-image:linear-gradient(180deg,transparent 10%,#000 34%),linear-gradient(90deg,transparent 0,#000 14%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(180deg,transparent 10%,#000 34%),linear-gradient(90deg,transparent 0,#000 14%);
 mask-composite:intersect;
}
/* The fading MCPL watermark (added by the original v75 script) moves left of the trainer. */
#dashboardPage .hero-dash .mcpl-hero-brand{right:calc(3.5% + 168px)!important;width:220px!important;max-width:24%!important}
#dashboardPage .hero-dash .mcpl-hero-brand b{font-size:26px!important}
#dashboardPage .hero-dash .mcpl-hero-brand span{font-size:15px!important;white-space:nowrap!important}
/* Not enough room beside the trainer: the watermark is hidden rather than overlapping. */
@media(max-width:1260px){#dashboardPage .hero-dash .mcpl-hero-brand{display:none!important}}
@media(max-width:700px){
 #dashboardPage .hero-dash::before{width:104px!important;height:168px!important;right:4px!important;opacity:.85!important}
 #dashboardPage .hero-dash h1,#dashboardPage .hero-dash p{max-width:calc(100% - 96px)!important}
}

/* ---------- 2. Sidebar: full height, blue -> light blue ---------- */
/* The original sticky sidebar (100vh) never sticks because html and body both
   have overflow-x:hidden, so it scrolls away and leaves a pale strip below.
   It is fixed to the viewport instead: always top to bottom, on every page
   length, and it scrolls internally on short screens. The grid keeps its
   210px column, so the content does not move. */
@media(min-width:801px){
 .app>.side{
  position:fixed!important;top:0!important;bottom:0!important;left:0!important;
  width:210px!important;height:auto!important;overflow-y:auto!important;overscroll-behavior:contain;
  /* strong blue behind every label (first 600px), light blue towards the bottom */
  background:linear-gradient(180deg,#0a4a86 0,#0c5aa3 300px,#0e65b4 600px,#a4d5f6 100%) local!important;
  scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;
 }
 .app>.main{grid-column:2}
 .side .navbtn{text-shadow:0 1px 2px rgba(3,30,56,.35)}
}

/* ---------- 3. Sidebar MCPL wordmark: continuous left-to-right slide ---------- */
/* A fixed clipping window inside the sidebar; two copies exactly one window
   apart, so the copy leaving on the right is the one entering on the left.
   The original 3D flip is switched off for this wordmark only. */
.side .brand .mcpls-win{
 display:block;position:relative;overflow:hidden;height:1.2em;margin:0 -4px;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
 mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.side .brand .mcpls-track{position:absolute;inset:0;will-change:transform;animation:mcpls-slide 6.5s linear infinite}
.side .brand .mcpls-track .mcpl-spin{
 display:block!important;position:absolute!important;top:0;left:0;width:100%;text-align:center;line-height:1.2;
 animation:none!important;-webkit-animation:none!important;transform:none!important;-webkit-transform:none!important;
}
.side .brand .mcpls-track .mcpl-spin+.mcpl-spin{left:-100%}
@keyframes mcpls-slide{from{transform:translateX(0)}to{transform:translateX(100%)}}

@media(prefers-reduced-motion:reduce){
 .side .brand .mcpls-track{animation:none!important}
 .side .brand .mcpls-track .mcpl-spin+.mcpl-spin{display:none!important}
}