/* A single department, explored one part at a time. */
#atlas-playful[data-sales-polished] #learn .dept-foundation{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid #85669066;margin-top:18px;padding-top:13px;text-align:center}
#atlas-playful[data-sales-polished] #learn .dept-foundation strong{font-size:17px;color:#efd7ea;display:block}
#atlas-playful[data-sales-polished] #learn .dept-foundation span{font-size:14px;color:#c4b0ce;display:block;margin-top:4px}
html body#atlas-playful[data-sales-polished] #learn .pa-vertical .map-chapter{grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:44px;align-items:center}
#atlas-playful[data-sales-polished] #learn .map-context{min-width:0;display:flex;flex-direction:column;gap:28px}
#atlas-playful[data-sales-polished] #learn .map-overview{width:100%;max-width:440px;position:relative;display:block;aspect-ratio:960/660}
#atlas-playful[data-sales-polished] #learn .map-context .pa-label{font-size:12px!important;letter-spacing:.1em;color:#d1aedf}
html body#atlas-playful[data-sales-polished] #learn .map-context .pa-copy h3{font-size:clamp(30px,3vw,42px)!important;line-height:1.1!important;max-width:440px}
html body#atlas-playful[data-sales-polished] #learn .map-context .pa-copy p{font-size:19px!important;line-height:1.45!important}
#atlas-playful[data-sales-polished] #learn .map-detail{min-width:0;position:relative;border-top:2px solid #d7a9dd;padding-top:18px}
#atlas-playful[data-sales-polished] #learn .story-active .map-detail{animation:map-expand .65s cubic-bezier(.2,.75,.2,1) both;transform-origin:0 50%}
#atlas-playful[data-sales-polished] #learn .map-detail:before{content:'';position:absolute;left:-32px;top:50%;width:20px;border-top:1px solid #a47eaf}
#atlas-playful[data-sales-polished] #learn .map-detail .am-note,#atlas-playful[data-sales-polished] #learn .map-detail .pa-handnote{display:none}
#atlas-playful[data-sales-polished] #learn .workflow-focus{background:radial-gradient(ellipse at 30% 10%,#493050,transparent 70%),#201626;border:1px solid #8e6b9b;padding:24px;color:#f5eaf5}
#atlas-playful[data-sales-polished] #learn .workflow-focus header{display:flex;align-items:center;gap:18px;padding-bottom:20px;border-bottom:1px solid #765d80;margin-bottom:22px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header img{height:85px;width:72px;object-fit:cover;object-position:50% 20%}
#atlas-playful[data-sales-polished] #learn .workflow-focus header small{font-size:12px;letter-spacing:.12em;color:#d7bcdf}
#atlas-playful[data-sales-polished] #learn .workflow-focus header strong{display:block;font-size:29px;margin-top:6px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header>span{margin-left:auto;font-size:11px;color:#e8c9e5;letter-spacing:.12em}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work>div{font-size:13px;opacity:.45}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work>div.is-current{opacity:1}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work svg{width:42px;height:42px;padding:9px;animation:none;box-shadow:none}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work .is-current svg{background:#f1c5e6;box-shadow:0 0 18px #c295d955;transform:translateY(-3px)}
#atlas-playful[data-sales-polished] #learn .workflow-detail{padding:28px 0;min-height:245px}
#atlas-playful[data-sales-polished] #learn .workflow-detail>span{font:13px ui-monospace,monospace;color:#d2b0e0}
#atlas-playful[data-sales-polished] #learn .workflow-detail h4{font-size:38px;margin:12px 0;color:#f5d3e9;line-height:1.1}
#atlas-playful[data-sales-polished] #learn .workflow-detail p{font-size:19px;line-height:1.45;margin:0 0 20px;max-width:500px}
#atlas-playful[data-sales-polished] #learn .workflow-result{display:flex;align-items:center;gap:12px;font-size:18px}
#atlas-playful[data-sales-polished] #learn .workflow-result i{font-style:normal;color:#271b30;background:#e9c6e6;padding:4px 8px}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer{display:flex;align-items:center;gap:18px;border-top:1px solid #70547b;padding-top:18px;flex-wrap:wrap}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer>span{width:100%;font-size:11px;letter-spacing:.12em;color:#c7b0d0}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer b{font-size:23px}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer small{font-size:15px;font-weight:400;color:#c4b6cb}
#atlas-playful[data-sales-polished] #learn .workflow-example{display:block;color:#b8a7c1;font-size:11px;margin-top:16px}
@keyframes map-expand{from{opacity:.2;transform:translateX(-15px) scale(.94)}to{opacity:1;transform:none}}
@media(max-width:760px){
html body#atlas-playful[data-sales-polished] #learn .pa-vertical .map-chapter{grid-template-columns:1fr;gap:14px;align-content:center}
#atlas-playful[data-sales-polished] #learn .map-context{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;align-items:center}
#atlas-playful[data-sales-polished] #learn .map-context .pa-copy{display:contents}
#atlas-playful[data-sales-polished] #learn .map-context .pa-label{display:none}
html body#atlas-playful[data-sales-polished] #learn .map-context .pa-copy h3{font-size:26px!important;margin:0!important;grid-column:2;grid-row:1}
html body#atlas-playful[data-sales-polished] #learn .map-context .pa-copy p{font-size:16px!important;line-height:1.4!important;grid-column:1/-1;margin:0!important}
#atlas-playful[data-sales-polished] #learn .map-detail{padding-top:12px}
#atlas-playful[data-sales-polished] #learn .map-detail:before{display:none}
#atlas-playful[data-sales-polished] #learn .dept-foundation{gap:6px;margin-top:10px;padding-top:9px}
#atlas-playful[data-sales-polished] #learn .dept-foundation strong{font-size:12px}
#atlas-playful[data-sales-polished] #learn .dept-foundation span{font-size:11px;margin-top:2px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-wave{height:63px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-messages{height:75px}
#atlas-playful[data-sales-polished] #learn .workflow-focus{padding:16px 12px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header{gap:12px;padding-bottom:14px;margin-bottom:18px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header img{width:52px;height:65px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header strong{font-size:23px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header>span{display:none}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work{gap:3px}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work svg{width:32px;height:32px;padding:7px}
#atlas-playful[data-sales-polished] #learn .workflow-focus .dept-work>div{font-size:11px}
#atlas-playful[data-sales-polished] #learn .workflow-detail{padding:22px 4px;min-height:225px}
#atlas-playful[data-sales-polished] #learn .workflow-detail h4{font-size:32px}
#atlas-playful[data-sales-polished] #learn .workflow-detail p{font-size:17px}
#atlas-playful[data-sales-polished] #learn .workflow-result{font-size:16px}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer{gap:12px;padding-top:12px}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer b{font-size:20px}
}
@media(prefers-reduced-motion:reduce){#atlas-playful[data-sales-polished] #learn .story-active .map-detail{animation:none}}
#atlas-playful[data-sales-polished] #learn .workflow-focus footer{padding-bottom:0;margin:0}
@media(max-width:760px){
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-cap>span{min-height:20px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-heading{margin-bottom:8px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-agent{gap:10px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-scene{padding-top:10px;padding-bottom:10px}
}
@media(min-width:761px) and (max-height:850px){
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-portrait{height:100px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-wave{height:45px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-messages{height:70px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-work svg{width:42px!important;height:42px!important}
#atlas-playful[data-sales-polished] #learn .dept-foundation{margin-top:10px;padding-top:8px}
#atlas-playful[data-sales-polished] #learn .workflow-detail{min-height:210px;padding:20px 0}
#atlas-playful[data-sales-polished] #learn .workflow-focus header{padding-bottom:14px;margin-bottom:16px}
#atlas-playful[data-sales-polished] #learn .workflow-focus header img{height:65px;width:55px}
}
@media(min-width:761px) and (max-height:850px){
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-heading>span{display:none}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-heading h3{margin-top:0}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-scene{padding-top:8px;padding-bottom:8px}
}
@media(min-width:761px) and (max-height:850px){
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-messages{height:80px;gap:3px;padding-top:3px}
#atlas-playful[data-sales-polished] #learn .pa-vertical .dept-messages i{font-size:12px;line-height:1.2;padding:3px 6px}
}

/* A clear point sends the direction from the owner to Chief. */
#atlas-playful[data-sales-polished] #pa-panel-department .direction-hand{animation:point-to-chief 4.8s ease-in-out infinite;transform-origin:20% 70%;transform:rotate(-4deg)}
@keyframes point-to-chief{0%,18%,100%{transform:translateX(-2px) rotate(-4deg)}38%,54%{transform:translateX(4px) rotate(-1deg)}}
@media(prefers-reduced-motion:reduce){#atlas-playful[data-sales-polished] #pa-panel-department .direction-hand{animation:none!important}}