/* USTP People: board orbit + Secretariat badges. Navy #0B1F3A, red #E1251B, coral #FF8A7F. */

/* ---------- board orbit ---------- */
.ustp-orbit{--navy:#0B1F3A;--red:#E1251B;--coral:#FF8A7F;position:relative;font-family:'DM Sans',sans-serif;color:var(--navy)}
.ustp-orbit__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px}
.ustp-orbit__chips button{font:600 13px/1 'DM Sans',sans-serif;color:var(--navy);background:#fff;border:1px solid #DCE3EE;border-radius:999px;padding:9px 14px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .25s}
.ustp-orbit__chips button b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;border-radius:999px;background:#EEF2F8;font-size:11px;transition:inherit}
.ustp-orbit__chips button:hover{border-color:var(--coral);transform:translateY(-1px)}
.ustp-orbit__chips button.is-on{background:var(--red);border-color:var(--red);color:#fff}
.ustp-orbit__chips button.is-on b{background:rgba(255,255,255,.22)}
.ustp-orbit__chips button:focus-visible,.ustp-orbit__p:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

.ustp-orbit__frame{container-type:inline-size;width:min(100%,calc(76vh * 1140 / 800));margin:0 auto}
.ustp-orbit__stage{position:relative;aspect-ratio:1140/800}
.ustp-orbit__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ustp-orbit__ring{fill:none;stroke-width:1.5}
.ustp-orbit__ring.is-inner{stroke:rgba(225,37,27,.35)}
.ustp-orbit__ring.is-outer{stroke:rgba(11,31,58,.16)}
.ustp-orbit__dash{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 22;opacity:0;animation:ustpOrbitSpin 40s linear infinite}
.ustp-orbit__dash.is-inner{stroke:var(--red);animation-direction:reverse;animation-duration:28s}
.ustp-orbit__dash.is-outer{stroke:#7F93B2}
.ustp-orbit.is-ready .ustp-orbit__dash{opacity:.55;transition:opacity 1s}
@keyframes ustpOrbitSpin{to{stroke-dashoffset:-480}}
.ustp-orbit__spoke{stroke:rgba(11,31,58,.13);stroke-width:1.5;transition:stroke .3s,stroke-width .3s,opacity .3s}
.ustp-orbit__spoke.is-hot{stroke:var(--red);stroke-width:2.5}
.ustp-orbit__chair-ring{fill:none;stroke:url(#ustpOrbitGrad);stroke-width:5;stroke-linecap:round}
.ustp-orbit__pulse{fill:url(#ustpOrbitGlow);opacity:0;pointer-events:none}

/* a person: the photo's centre sits exactly on its point; the name hangs below */
.ustp-orbit__p{--av:7.4cqw;position:absolute;width:15.5cqw;margin:calc(var(--av) / -2) 0 0 -7.75cqw;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;z-index:2;transition:opacity .35s,filter .35s}
.ustp-orbit__p.is-inner{--av:8.6cqw}
.ustp-orbit__p.is-chair{--av:14.6cqw;width:24cqw;margin-left:-12cqw;cursor:default;z-index:3}
.ustp-orbit__ph{position:relative;display:block;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;background:#E9EEF6;box-shadow:0 0 0 .35cqw #fff,0 .9cqw 2.2cqw rgba(11,31,58,.18);transition:box-shadow .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.ustp-orbit__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ustp-orbit__ph i{display:grid;place-items:center;height:100%;font:700 calc(var(--av) * .32)/1 'DM Sans',sans-serif;font-style:normal;color:var(--red)}
/* the theme paints hovered buttons pink: keep people and chips in our own colours */
.ustp-orbit button.ustp-orbit__p,.ustp-orbit button.ustp-orbit__p:hover,.ustp-orbit button.ustp-orbit__p:focus{background:transparent;color:var(--navy);border:0;box-shadow:none;text-transform:none;letter-spacing:normal;white-space:normal}
.ustp-orbit .ustp-orbit__chips button:hover,.ustp-orbit .ustp-orbit__chips button:focus{background:#fff;color:var(--navy)}
.ustp-orbit .ustp-orbit__chips button.is-on,.ustp-orbit .ustp-orbit__chips button.is-on:hover,.ustp-orbit .ustp-orbit__chips button.is-on:focus{background:var(--red);color:#fff}
/* frosted label so orbit lines pass behind the names */
.ustp-orbit__label{display:flex;flex-direction:column;align-items:center;width:max-content;max-width:19.5cqw;margin-top:.7cqw;padding:.3cqw .75cqw .4cqw;border-radius:8px;background:rgba(243,246,251,.88);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ustp-orbit__name{font-weight:700;font-size:clamp(12px,1.24cqw,15px);line-height:1.2}
.ustp-orbit__role{margin-top:.2cqw;font-size:clamp(11px,1.04cqw,13px);line-height:1.25;color:#55657E}
.is-chair .ustp-orbit__label{margin-top:1.1cqw;padding:.4cqw 1.1cqw .5cqw}
.is-chair .ustp-orbit__name{font-size:clamp(15px,1.75cqw,21px)}
.is-chair .ustp-orbit__role{font-size:clamp(12px,1.2cqw,15px);color:var(--red);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ustp-orbit__p:hover .ustp-orbit__ph,.ustp-orbit__p:focus-visible .ustp-orbit__ph,.ustp-orbit__p.is-hot .ustp-orbit__ph{transform:scale(1.08);box-shadow:0 0 0 .35cqw #fff,0 0 0 .7cqw var(--red),0 1.4cqw 3cqw rgba(225,37,27,.28)}

/* tooltip with the full role */
.ustp-orbit__tip{position:absolute;top:-12px;left:50%;width:max-content;max-width:250px;white-space:normal;font-weight:400;transform:translate(-50%,-100%);padding:10px 13px;border-radius:12px;background:#fff;box-shadow:0 14px 34px rgba(11,31,58,.18);font-size:13px;line-height:1.35;text-align:left;color:var(--navy);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:5}
.ustp-orbit__tip b{display:block;margin-bottom:3px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.ustp-orbit__p:hover .ustp-orbit__tip,.ustp-orbit__p:focus-visible .ustp-orbit__tip{opacity:1;transform:translate(-50%,calc(-100% - 6px))}

/* dimming: when a person is in focus or a chip is chosen */
.ustp-orbit.is-focus .ustp-orbit__p:not(.is-hot):not(.is-chair),.ustp-orbit .ustp-orbit__p.is-dim{opacity:.28;filter:grayscale(1)}
.ustp-orbit.is-focus .ustp-orbit__spoke:not(.is-hot),.ustp-orbit .ustp-orbit__spoke.is-dim{opacity:.25}
.ustp-orbit .ustp-orbit__spoke.is-lit{stroke:var(--red);stroke-width:2}
.ustp-orbit__group{display:none}

.ustp-orbit__term{display:flex;align-items:center;justify-content:center;gap:14px;margin:8px 0 0;font:700 12px/1.2 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#55657E}
.ustp-orbit__term span{height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--red))}
.ustp-orbit__term span:last-child{transform:scaleX(-1)}

/* phones and small tablets: grouped cards instead of the orbit */
@media (max-width:899px){
	.ustp-orbit__frame{width:100%;container-type:normal}
	.ustp-orbit__stage{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:14px}
	.ustp-orbit__lines{display:none}
	.ustp-orbit .ustp-orbit__p,.ustp-orbit button.ustp-orbit__p,.ustp-orbit button.ustp-orbit__p:hover,.ustp-orbit button.ustp-orbit__p:focus{--av:84px;position:static;width:auto;margin:0;padding:18px 10px 16px;background:#fff;border-radius:14px;box-shadow:0 10px 26px rgba(11,31,58,.07)}
	.ustp-orbit .ustp-orbit__p.is-chair{--av:132px;grid-column:1/-1;padding:26px 16px;background:linear-gradient(180deg,#fff,#FFF3F2)}
	.ustp-orbit__ph{box-shadow:0 0 0 4px #fff,0 0 0 6px rgba(225,37,27,.85),0 10px 22px rgba(11,31,58,.15)}
	.ustp-orbit__label,.is-chair .ustp-orbit__label{width:auto;max-width:none;margin-top:12px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
	.ustp-orbit__name{font-size:15px}
	.is-chair .ustp-orbit__name{font-size:20px}
	.is-chair .ustp-orbit__label{margin-top:16px}
	.ustp-orbit__role{margin-top:4px;font-size:12.5px}
	.is-chair .ustp-orbit__role{font-size:13px}
	.ustp-orbit__tip{display:none}
	.ustp-orbit__group{display:block;grid-column:1/-1;margin:14px 0 0;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
	.ustp-orbit__chips{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
	.ustp-orbit__chips button{flex:0 0 auto}
	.ustp-orbit__term{margin-top:22px;font-size:11px;letter-spacing:.12em;gap:10px}
	.ustp-orbit__term span{width:22px}
}

/* ---------- Secretariat badges ---------- */
.ustp-badges{--navy:#0B1F3A;--red:#E1251B;--coral:#FF8A7F;position:relative;padding-top:6px;overflow-x:clip;overflow-clip-margin:24px;font-family:'DM Sans',sans-serif;color:var(--navy)}
.ustp-badges__rail{position:absolute;left:2%;right:2%;top:0;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--red),var(--coral) 50%,var(--red));box-shadow:0 4px 10px rgba(225,37,27,.25)}
.ustp-badges__rail::before,.ustp-badges__rail::after{content:'';position:absolute;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--navy);box-shadow:inset 0 0 0 4px #fff}
.ustp-badges__rail::before{left:-6px}.ustp-badges__rail::after{right:-6px}
.ustp-badges__list{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ustp-badge{flex:1 1 0;max-width:168px;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;will-change:transform}
.ustp-badge.is-lead{max-width:210px;flex-grow:1.3}
.ustp-badge__string{width:2px;height:var(--drop);background:repeating-linear-gradient(180deg,#9AA8BF 0 4px,#C5CFDF 4px 8px)}
.ustp-badge__card{position:relative;width:100%;padding:26px 12px 0;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(11,31,58,.12);text-align:center;overflow:hidden;cursor:grab}
.ustp-badge__clip{position:absolute;top:8px;left:50%;width:36px;height:9px;margin-left:-18px;border-radius:6px;background:#E9EEF6;box-shadow:inset 0 2px 3px rgba(11,31,58,.18)}
.ustp-badge__ph{display:block;width:92px;height:92px;margin:6px auto 0;border-radius:50%;overflow:hidden;background:#E9EEF6;box-shadow:0 0 0 4px #fff,0 0 0 6px var(--coral)}
.is-lead .ustp-badge__ph{width:122px;height:122px;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--red)}
.ustp-badge__ph img{width:100%;height:100%;object-fit:cover;display:block}
.ustp-badge__ph i{display:grid;place-items:center;height:100%;font:700 30px/1 'DM Sans',sans-serif;font-style:normal;color:var(--red)}
.ustp-badge__name{display:block;margin-top:14px;font-size:15px;line-height:1.2}
.is-lead .ustp-badge__name{font-size:18px}
.ustp-badge__role{display:block;margin:5px 0 16px;font-size:12.5px;line-height:1.3;color:#55657E;min-height:2.6em}
.ustp-badge__strip{display:block;margin:0 -12px;padding:8px 6px;background:var(--navy);color:#fff;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.is-lead .ustp-badge__strip{background:linear-gradient(90deg,var(--red),#C81E15)}
@media (max-width:1099px){
	.ustp-badges__rail{display:none}
	.ustp-badges__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}
	.ustp-badge,.ustp-badge.is-lead{max-width:none}
	.ustp-badge.is-lead{grid-column:1/-1;order:-1}
	.ustp-badge.is-lead .ustp-badge__card{max-width:280px}
	.ustp-badge__string{height:22px}
}

@media (prefers-reduced-motion:reduce){.ustp-orbit__dash{animation:none}.ustp-orbit__ph,.ustp-orbit__p,.ustp-orbit__tip{transition:none}}
