/* ==========================================================================
   PEOPLE — Analytics v2 layer: backdrop, KPI strip, header icons, gradient
   strokes and live point. Colours are the four Quorel mark colours plus teal.
   Loaded after people-analytics.css.
   ========================================================================== */
.pa-section { --mk-blue: var(--mark-blue, #007cfe); --mk-violet: var(--mark-violet, #6a31ee); --mk-orange: var(--mark-orange, #ff8a00); }
.pa-stage { position: relative; isolation: isolate; margin-top: clamp(32px, 4.5vh, 52px); }
.pa-stage .pa-frame { margin-top: 0; position: relative; z-index: 1; }
.pa-stage::before { content: ''; position: absolute; inset: -40px -20px; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 10%, transparent) 1px, transparent 1.5px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent); }
.pa-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: pa-blob 18s ease-in-out infinite alternate; }
.pa-blob--a { width: 40%; height: 60%; left: -8%; top: -10%; background: rgb(47 107 237 / 26%); }
.pa-blob--b { width: 34%; height: 55%; right: -6%; top: 10%; background: rgb(106 49 238 / 22%); animation-delay: -6s; }
.pa-blob--c { width: 30%; height: 45%; left: 40%; bottom: -14%; background: rgb(20 184 166 / 20%); animation-delay: -11s; }
@keyframes pa-blob { to { transform: translate3d(30px, -20px, 0) scale(1.08); } }
.pa-chip { position: absolute; z-index: 3; right: 230px; top: -18px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  background: #0b1533; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 14px 30px -14px rgb(11 21 51 / 70%); }
.pa-chip i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pa-ping 2s ease-out infinite; }
@keyframes pa-chipf { 50% { transform: translateY(-5px); } }
@keyframes pa-ping { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 60%); } 70%, 100% { box-shadow: 0 0 0 7px rgb(34 197 94 / 0%); } }

/* KPI strip */
.pa-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 16px 16px 0; list-style: none; }
.pa-k { --c: var(--mk-blue); position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; color: var(--ink);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, var(--surface)) 0%, var(--surface) 70%); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); }
.pa-k::after { content: ''; position: absolute; width: 120px; height: 120px; right: -40px; top: -60px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 22%, transparent), transparent); pointer-events: none; }
.pa-k--violet { --c: var(--mk-violet); } .pa-k--orange { --c: var(--mk-orange); } .pa-k--teal { --c: #14b8a6; }
.pa-k small { display: block; font-size: 12.5px; color: var(--ink-3); }
.pa-k b { display: block; margin-top: 2px; font-size: 26px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pa-k > span:not(.pa-hico) { flex: 1; min-width: 0; }
.pa-kspark { width: 60px; height: 22px; flex-shrink: 0; overflow: visible; }
.pa-kspark path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pa-kspark rect { fill: color-mix(in srgb, var(--c) 30%, transparent); }
.pa-kspark rect:last-child { fill: var(--c); }
.pa-kspark--ring { width: 30px; height: 30px; }
.pa-kspark--ring circle { fill: none; stroke: color-mix(in srgb, var(--c) 20%, transparent); stroke-width: 3.2; }
.pa-kspark--ring circle + circle { stroke: var(--c); stroke-linecap: round; }

/* Header icons */
.pa-hico { --c: var(--mk-blue); display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 11px; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 8px 16px -8px color-mix(in srgb, var(--c) 80%, transparent); }
.pa-hico svg { width: 19px; height: 19px; }
.pa-k--violet .pa-hico, .pa-card--bars .pa-hico { --c: var(--mk-violet); }
.pa-k--orange .pa-hico, .pa-card--donut .pa-hico { --c: var(--mk-orange); }
.pa-k--teal .pa-hico, .pa-card--gauge .pa-hico { --c: #14b8a6; }
.pa-card header { justify-content: flex-start; align-items: center; gap: 14px; }
.pa-card header .pa-kpi { margin-left: auto; }

/* Gradient strokes and live point */
.pa-stroke { stroke: url(#pa-strokeg); stroke-width: 3; filter: drop-shadow(0 6px 10px rgb(47 107 237 / 30%)); }
.pa-live { position: absolute; right: 0; top: var(--y); width: 12px; height: 12px; margin: -6px -6px 0 0; border-radius: 50%; background: #6a31ee; border: 2.5px solid #fff; }
@keyframes pa-live { 0% { box-shadow: 0 0 0 0 rgb(106 49 238 / 55%); } 70%, 100% { box-shadow: 0 0 0 12px rgb(106 49 238 / 0%); } }
.pa-ring-fg { stroke: url(#pa-ringg); filter: drop-shadow(0 6px 10px rgb(255 120 40 / 30%)); }
.pa-ring-bg { stroke: color-mix(in srgb, var(--mk-orange) 12%, var(--surface-2)); }
.pa-legend .is-a i { background: linear-gradient(135deg, #ff8a00, #ff5c8a); }
.pa-legend i { background: color-mix(in srgb, var(--mk-orange) 22%, var(--surface-3)); }
.pa-arc-fg { stroke: url(#pa-arcg); filter: drop-shadow(0 6px 10px rgb(20 184 166 / 35%)); }
.pa-btrack i { background: linear-gradient(90deg, #4f2bd6, var(--mk-violet) 50%, #8f6bff); }
.pa-bars li:first-child .pa-btrack i { background: linear-gradient(90deg, #4f2bd6, var(--mk-violet)); box-shadow: 0 0 0 3px rgb(106 49 238 / 14%); }
.pa-card--line:hover { border-color: color-mix(in srgb, var(--mk-blue) 30%, var(--line)); }
.pa-card--donut:hover { border-color: color-mix(in srgb, var(--mk-orange) 35%, var(--line)); }
.pa-card--bars:hover { border-color: color-mix(in srgb, var(--mk-violet) 30%, var(--line)); }
.pa-card--gauge:hover { border-color: rgb(20 184 166 / 40%); }

/* Entrance for the new pieces */
.pa-section.is-in .pa-k { animation: pa-up 700ms var(--pa-ease) backwards; }
.pa-section.is-in .pa-k:nth-child(2) { animation-delay: 90ms; } .pa-section.is-in .pa-k:nth-child(3) { animation-delay: 180ms; } .pa-section.is-in .pa-k:nth-child(4) { animation-delay: 270ms; }
.pa-section.is-in .pa-kspark path { stroke-dasharray: 90; animation: pa-kdraw 1200ms var(--pa-ease) 600ms backwards; }
.pa-section.is-in .pa-live { animation: pa-fade 400ms ease 2200ms backwards, pa-live 2.2s ease-out 2.6s infinite; }
.js .pa-section:not(.is-in) .pa-chip { opacity: 0; }
.pa-section.is-in .pa-chip { animation: pa-up 700ms var(--pa-ease) 900ms backwards, pa-chipf 5s ease-in-out 1.6s infinite; }
@keyframes pa-kdraw { from { stroke-dashoffset: 90; } }

@media (max-width: 1100px) { .pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .pa-kpis { padding: 10px 10px 0; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  .pa-chip { right: 12px; top: -16px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-blob, .pa-chip, .pa-chip i, .pa-live { animation: none !important; }
  .js .pa-section:not(.is-in) .pa-chip { opacity: 1; }
}

.pa-ring svg, .pa-arc svg { overflow: visible; }

/* The stroke uses non-scaling width, which ignores pathLength for dashes;
   draw it with a long pixel dash instead so it always completes. */
.pa-stroke { stroke-dasharray: 4000; stroke-dashoffset: 0; }
.pa-section.is-in .pa-stroke { animation: pa-draw-px 1800ms var(--pa-ease) 500ms backwards; }
@keyframes pa-draw-px { from { stroke-dashoffset: 4000; } }

/* Keep the reveal singular: all dashboard contents travel with the frame. */
.js .pa-section .pa-frame { opacity: 1; transform: scale(.75); transform-origin: center center; will-change: transform; }
.pa-section.is-in .pa-frame { animation: none; }
.pa-section.is-in .pa-frame :is(.pa-k, .pa-kspark path, .pa-live, .pa-card, .pa-stroke, .pa-area, .pa-avg, .pa-ring-fg, .pa-arc-fg, .pa-btrack i, .pa-legend li, .pa-mini li, .pa-target),
.pa-section.is-in :is(.pa-blob, .pa-chip) { animation: none !important; }
@media (max-width: 680px) {
  .js .pa-section .pa-frame { transform: scale(.93); }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .js .pa-section .pa-frame { transform: scale(.85); }
}
@media (prefers-reduced-motion: reduce) {
  .js .pa-section .pa-frame { opacity: 1; transform: none !important; }
  .pa-section.is-in .pa-frame { animation: none !important; }
}