/* ==========================================================================
   PEOPLE — Analytics, shown as one product dashboard. people/index.html only.
   Charts are static SVG drawn at build time; people-analytics.js only adds
   .is-in (entrance), counts numbers up and drives the line-chart tooltip.
   All figures are the page's existing illustrative sample data.
   ========================================================================== */
.pa-section { --pa-ease: cubic-bezier(.22, 1, .36, 1); --pa-blue: #2f6bed; --pa-blue-2: #1d4ed8; --pa-teal: #14b8a6;
  position: relative; isolation: isolate; overflow-x: clip;
  background: radial-gradient(60% 50% at 80% 30%, rgb(47 107 237 / 8%), transparent 70%), radial-gradient(40% 40% at 10% 90%, rgb(20 184 166 / 6%), transparent 70%); }
.pa-head { max-width: 760px; }
.pa-head h2 { margin-top: 14px; }
.pa-head .lede { margin-top: 16px; }

/* Frame: a product window */
.pa-frame { margin-top: clamp(32px, 4.5vh, 52px); border-radius: 24px; background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--line); box-shadow: 0 1px 2px rgb(16 24 40 / 4%), 0 40px 80px -48px rgb(30 50 110 / 35%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; }
.pa-bar { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.pa-dots { display: inline-flex; gap: 7px; }
.pa-dots i { width: 11px; height: 11px; border-radius: 50%; background: #e3e8f2; }
.pa-crumb { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--ink); }
.pa-crumb img { width: 18px; height: 18px; }
.pa-crumb em { font-style: normal; color: var(--ink-3); font-weight: 400; }
.pa-period { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; font-weight: 500; color: var(--ink-2); background: var(--surface); }
.pa-period svg { width: 15px; height: 15px; }

.pa-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; padding: 16px; }
.pa-card { position: relative; padding: 22px 24px 20px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%); transition: box-shadow 320ms ease, border-color 320ms ease, transform 320ms var(--pa-ease); }
.pa-card:hover { border-color: color-mix(in srgb, var(--pa-blue) 25%, var(--line)); box-shadow: 0 18px 40px -26px rgb(30 60 140 / 40%); transform: translateY(-2px); }
.pa-card--line { grid-column: span 8; }
.pa-card--donut { grid-column: span 4; }
.pa-card--bars { grid-column: span 7; }
.pa-card--gauge { grid-column: span 5; }
.pa-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.pa-card h3 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.015em; color: var(--ink); }
.pa-card header p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }
.pa-kpi { text-align: right; }
.pa-kpi strong { display: block; font-size: 30px; font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pa-kpi span { font-size: 12.5px; color: var(--ink-3); }
.pa-card figure { margin: 0; }
.pa-card figcaption { margin-top: 14px; font-size: 12px; color: var(--ink-3); }

/* Line */
.pa-plot { position: relative; height: 210px; margin: 18px 0 0 34px; }
.pa-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pa-grid-l { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pa-avg { stroke: var(--pa-blue); stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .55; vector-effect: non-scaling-stroke; }
.pa-area { fill: url(#pa-area); }
.pa-stroke { fill: none; stroke: var(--pa-blue); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pa-yaxis span { position: absolute; left: -34px; top: var(--y); transform: translateY(-50%); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pa-xaxis { display: flex; justify-content: space-between; margin: 8px 0 0 34px; font-size: 12px; color: var(--ink-3); }
.pa-hot { position: absolute; inset: 0; }
.pa-hot i { position: absolute; left: var(--x); top: 0; bottom: 0; width: calc(100% / 20); transform: translateX(-50%); cursor: crosshair; }
.pa-hot i::after { content: ''; position: absolute; left: 50%; top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; border: 2.5px solid var(--pa-blue); opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 220ms var(--pa-ease); }
.pa-hot i::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--pa-blue) 35%, transparent); opacity: 0; transition: opacity 180ms ease; }
.pa-hot i:hover::after, .pa-hot i:hover::before { opacity: 1; transform: none; }
.pa-tip { position: absolute; z-index: 2; left: 0; top: 0; padding: 7px 10px; border-radius: 9px; background: #0b1533; color: #fff; pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% - 12px)); transition: opacity 160ms ease; white-space: nowrap; box-shadow: 0 10px 24px -10px rgb(11 21 51 / 60%); }
.pa-tip b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pa-tip small { margin-left: 6px; font-size: 11.5px; color: #a9b4cf; }
.pa-plot.is-tip .pa-tip { opacity: 1; }
.pa-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--line); }
.pa-mini span { display: block; font-size: 12px; color: var(--ink-3); }
.pa-mini b { font-size: 18px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Donut */
.pa-donut { display: grid; justify-items: center; margin-top: 10px !important; }
.pa-ring { position: relative; width: min(190px, 100%); aspect-ratio: 1; margin-top: 8px; }
.pa-ring svg { width: 100%; height: 100%; }
.pa-ring-bg { fill: none; stroke: color-mix(in srgb, var(--pa-teal) 16%, var(--surface-2)); stroke-width: 14; }
.pa-ring-fg { fill: none; stroke: var(--pa-blue); stroke-width: 14; stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.pa-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pa-ring-c strong { font-size: 34px; font-weight: 750; letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pa-ring-c small { font-size: 12.5px; color: var(--ink-3); }
.pa-legend { display: grid; gap: 8px; width: 100%; margin: 18px 0 0; padding: 0; list-style: none; }
.pa-legend li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.pa-legend i { width: 10px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--pa-teal) 30%, var(--surface-3)); }
.pa-legend .is-a i { background: var(--pa-blue); }
.pa-legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Bars (horizontal, ranked) */
.pa-bars ol { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.pa-bars li { display: grid; grid-template-columns: 74px minmax(0, 1fr) 34px; align-items: center; gap: 14px; }
.pa-bname { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.pa-btrack { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.pa-btrack i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--pa-blue-2), var(--pa-blue) 60%, #5b8cf5); transform-origin: left; }
.pa-bars li:first-child .pa-btrack i { background: linear-gradient(90deg, var(--pa-blue-2), var(--pa-blue)); box-shadow: 0 0 0 3px rgb(47 107 237 / 12%); }
.pa-bars li b { text-align: right; font-size: 14px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pa-bars li:hover .pa-bname { color: var(--ink); }
.pa-bars li:hover .pa-btrack i { filter: brightness(1.08); }

/* Gauge */
.pa-gauge { display: grid; justify-items: center; }
.pa-arc { position: relative; width: min(280px, 100%); margin-top: 18px; }
.pa-arc svg { display: block; width: 100%; height: auto; overflow: visible; }
.pa-arc-bg { fill: none; stroke: var(--surface-2); stroke-width: 16; stroke-linecap: round; }
.pa-arc-fg { fill: none; stroke: url(#pa-area); stroke: var(--pa-teal); stroke-width: 16; stroke-linecap: round; stroke-dasharray: var(--v) 100; }
.pa-tick { stroke: var(--ink-3); stroke-width: 1.5; opacity: .5; }
.pa-arc-c { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; }
.pa-arc-c strong { display: block; font-size: 38px; font-weight: 750; letter-spacing: -.04em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.pa-arc-c small { font-size: 12.5px; color: var(--ink-3); }
.pa-target { display: flex; gap: 18px; margin-top: 16px; font-size: 12.5px; color: var(--ink-2); }
.pa-target span { display: inline-flex; align-items: center; gap: 7px; }
.pa-target i { width: 10px; height: 10px; border-radius: 3px; background: var(--surface-3); }
.pa-target i.ok { background: var(--pa-teal); }

/* --- Entrance (once, via .is-in) ----------------------------------------- */
.js .pa-section:not(.is-in) .pa-frame { opacity: 0; transform: translateY(28px); }
.pa-section.is-in .pa-frame { animation: pa-up 900ms var(--pa-ease) both; }
.pa-section.is-in .pa-card { animation: pa-up 760ms var(--pa-ease) backwards; animation-delay: calc(240ms + var(--k) * 110ms); }
.pa-section.is-in .pa-stroke { animation: pa-draw 1800ms var(--pa-ease) 500ms backwards; }
.pa-section.is-in .pa-area { animation: pa-fade 1200ms ease 1100ms backwards; }
.pa-section.is-in .pa-avg { animation: pa-fade 800ms ease 1700ms backwards; }
.pa-section.is-in .pa-ring-fg { animation: pa-ring 1500ms var(--pa-ease) 700ms backwards; }
.pa-section.is-in .pa-arc-fg { animation: pa-ring 1600ms var(--pa-ease) 1000ms backwards; }
.pa-section.is-in .pa-btrack i { animation: pa-grow 1100ms var(--pa-ease) backwards; animation-delay: calc(800ms + var(--i) * 100ms); }
.pa-section.is-in .pa-legend li, .pa-section.is-in .pa-mini li, .pa-section.is-in .pa-target { animation: pa-fade 700ms ease 1400ms backwards; }
@keyframes pa-up { from { opacity: 0; transform: translateY(28px); } }
@keyframes pa-fade { from { opacity: 0; } }
@keyframes pa-draw { from { stroke-dashoffset: 1; } }
@keyframes pa-ring { from { stroke-dasharray: 0 100; } }
@keyframes pa-grow { from { transform: scaleX(0); } }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1100px) {
  .pa-card--line, .pa-card--bars { grid-column: span 12; }
  .pa-card--donut, .pa-card--gauge { grid-column: span 6; }
}
@media (max-width: 680px) {
  .pa-grid { padding: 10px; gap: 10px; }
  .pa-card { grid-column: span 12 !important; padding: 18px; }
  .pa-crumb em, .pa-crumb em ~ * { display: none; }
  .pa-plot { height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-section *, .pa-section *::before, .pa-section *::after { animation: none !important; }
  .js .pa-section:not(.is-in) .pa-frame { opacity: 1; transform: none; }
  .pa-card:hover { transform: none; }
}