/* Header dropdown brand cards: tinted with each logo's own colour, they blur in one by one when a menu opens and lift on hover. */
.panel-wide{width:680px}
.panel-xwide .panel-cols{grid-template-columns:2.4fr 1fr}
.panel-logos.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.desk-panel .panel-logos{gap:16px 12px;padding-top:6px}
.desk-panel .panel-logos .panel-item{--accent:#2563EB;display:grid;grid-template-columns:1fr;justify-items:stretch;gap:8px;padding:0;border-radius:14px;background:transparent}
.desk-panel .panel-logos .panel-item:hover,.desk-panel .panel-logos .panel-item:focus-visible{background:transparent}
.desk-panel .panel-logos .pi-card{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-radius:14px;background:radial-gradient(120% 85% at 50% 0%,color-mix(in srgb,var(--accent),#fff 22%) 0%,var(--accent) 48%,color-mix(in srgb,var(--accent),#0b1220 58%) 100%);box-shadow:inset 0 1px 0 rgb(255 255 255/.28),inset 0 0 0 1px rgb(255 255 255/.08),0 8px 18px rgb(0 0 0/.32);transition:transform 260ms var(--ease-out),box-shadow 260ms var(--ease-out)}
/* Soft diagonal texture so flat colours read as a card, not a swatch. */
.desk-panel .panel-logos .pi-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,rgb(255 255 255/.06) 0 2px,transparent 2px 9px);pointer-events:none}
/* Light sweep that crosses the card on hover. */
.desk-panel .panel-logos .pi-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(105deg,transparent 38%,rgb(255 255 255/.5) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;pointer-events:none;z-index:2}
.desk-panel .panel-logos .pi-card .pi-logo{position:relative;z-index:1;width:80%;height:62%;padding:6px 10px;border:0;border-radius:10px;background:#fff;box-shadow:0 6px 14px rgb(2 6 23/.3);transition:transform 300ms cubic-bezier(.34,1.56,.64,1),box-shadow 300ms var(--ease-out)}
.desk-panel .panel-logos .pi-card .pi-logo img{width:100%;height:100%;object-fit:contain}
.desk-panel .panel-logos .pi-card .pi-logo.is-name{color:#0f172a;font-size:14px;letter-spacing:.02em}
.desk-panel .panel-logos .pi-label{font-size:12.5px;font-weight:600;color:#aab6cc;text-align:center;line-height:1.3;transition:color 200ms}
/* Accent bar under the card, as on the reference: grows out from the middle. */
.desk-panel .panel-logos .panel-item:after{content:"";justify-self:center;width:62%;height:3px;margin-top:-3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent);transform:scaleX(0);transition:transform 260ms var(--ease-out)}
.desk-panel .panel-logos .panel-item:hover .pi-card,.desk-panel .panel-logos .panel-item:focus-visible .pi-card{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgb(255 255 255/.32),inset 0 0 0 1px rgb(255 255 255/.14),0 14px 28px color-mix(in srgb,var(--accent),transparent 55%)}
.desk-panel .panel-logos .panel-item:hover .pi-logo,.desk-panel .panel-logos .panel-item:focus-visible .pi-logo{transform:translateY(-12px) scale(1.08);box-shadow:0 12px 22px rgb(2 6 23/.38)}
.desk-panel .panel-logos .panel-item:hover .pi-card:after,.desk-panel .panel-logos .panel-item:focus-visible .pi-card:after{background-position:-30% 0;transition:background-position 700ms ease}
.desk-panel .panel-logos .panel-item:hover .pi-label,.desk-panel .panel-logos .panel-item:focus-visible .pi-label{color:#fff}
.desk-panel .panel-logos .panel-item:hover:after,.desk-panel .panel-logos .panel-item:focus-visible:after{transform:scaleX(1)}
/* Opening a menu: cards come out of a blur one after another. */
@keyframes menu-card-in{from{opacity:0;transform:translateY(14px) scale(.92);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.has-panel.open .panel-logos .panel-item{animation:menu-card-in 440ms var(--ease-out) both;animation-delay:60ms}
@media(prefers-reduced-motion:reduce){.has-panel.open .panel-logos .panel-item{animation:none}.desk-panel .panel-logos .pi-card,.desk-panel .panel-logos .pi-logo,.desk-panel .panel-logos .pi-card:after,.desk-panel .panel-logos .panel-item:after{transition:none}.desk-panel .panel-logos .panel-item:hover .pi-card,.desk-panel .panel-logos .panel-item:hover .pi-logo{transform:none}}
/* Stagger: each card starts 45ms after the one before it. */
.has-panel.open .panel-logos li:nth-child(2) .panel-item{animation-delay:105ms}.has-panel.open .panel-logos li:nth-child(3) .panel-item{animation-delay:150ms}.has-panel.open .panel-logos li:nth-child(4) .panel-item{animation-delay:195ms}.has-panel.open .panel-logos li:nth-child(5) .panel-item{animation-delay:240ms}.has-panel.open .panel-logos li:nth-child(6) .panel-item{animation-delay:285ms}.has-panel.open .panel-logos li:nth-child(7) .panel-item{animation-delay:330ms}.has-panel.open .panel-logos li:nth-child(8) .panel-item{animation-delay:375ms}.has-panel.open .panel-logos li:nth-child(9) .panel-item{animation-delay:420ms}.has-panel.open .panel-logos li:nth-child(10) .panel-item{animation-delay:465ms}.has-panel.open .panel-logos li:nth-child(11) .panel-item{animation-delay:510ms}.has-panel.open .panel-logos li:nth-child(12) .panel-item{animation-delay:555ms}
/* Accent hues snapped to 15° steps (see portal/logo_accent.py); golds and yellows sit a little darker so white plates still stand out. */
.desk-panel .panel-logos .panel-item.acc-0{--accent:hsl(0 76% 46%)}.desk-panel .panel-logos .panel-item.acc-1{--accent:hsl(15 76% 46%)}.desk-panel .panel-logos .panel-item.acc-2{--accent:hsl(30 85% 44%)}.desk-panel .panel-logos .panel-item.acc-3{--accent:hsl(45 85% 44%)}.desk-panel .panel-logos .panel-item.acc-4{--accent:hsl(60 85% 44%)}.desk-panel .panel-logos .panel-item.acc-5{--accent:hsl(75 85% 44%)}.desk-panel .panel-logos .panel-item.acc-6{--accent:hsl(90 76% 46%)}.desk-panel .panel-logos .panel-item.acc-7{--accent:hsl(105 76% 46%)}.desk-panel .panel-logos .panel-item.acc-8{--accent:hsl(120 76% 46%)}.desk-panel .panel-logos .panel-item.acc-9{--accent:hsl(135 76% 46%)}.desk-panel .panel-logos .panel-item.acc-10{--accent:hsl(150 76% 46%)}.desk-panel .panel-logos .panel-item.acc-11{--accent:hsl(165 76% 46%)}.desk-panel .panel-logos .panel-item.acc-12{--accent:hsl(180 76% 46%)}.desk-panel .panel-logos .panel-item.acc-13{--accent:hsl(195 76% 46%)}.desk-panel .panel-logos .panel-item.acc-14{--accent:hsl(210 76% 46%)}.desk-panel .panel-logos .panel-item.acc-15{--accent:hsl(225 76% 46%)}.desk-panel .panel-logos .panel-item.acc-16{--accent:hsl(240 76% 46%)}.desk-panel .panel-logos .panel-item.acc-17{--accent:hsl(255 76% 46%)}.desk-panel .panel-logos .panel-item.acc-18{--accent:hsl(270 76% 46%)}.desk-panel .panel-logos .panel-item.acc-19{--accent:hsl(285 76% 46%)}.desk-panel .panel-logos .panel-item.acc-20{--accent:hsl(300 76% 46%)}.desk-panel .panel-logos .panel-item.acc-21{--accent:hsl(315 76% 46%)}.desk-panel .panel-logos .panel-item.acc-22{--accent:hsl(330 76% 46%)}.desk-panel .panel-logos .panel-item.acc-23{--accent:hsl(345 76% 46%)}