/* glen-design: v1 */
/* ============================================================================
   People: the living roster (a dot per person, open roles hollow), then
   headcount, payroll share, overtime, absence, turnover, open roles and
   training. Tokens only; both appearances come from the tokens. Prefix pp-.
   ========================================================================== */

.pp{ position: relative; min-width: 0; }
.pp-head > div:first-child{ flex: 1 1 480px; min-width: 0; }
.pp-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.pp-actions .btn--tint .ic{ color: var(--accent); }

/* --- roster hero ---------------------------------------------------------- */
.pp-hero{ padding: var(--s5); margin-bottom: var(--s4); }
.pp-hero-h{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s4); }
.pp-hero-h h2{ font-size: var(--fs-lg); letter-spacing: -.015em; }
.pp-hero-h .meta{ margin: var(--s1) 0 0; max-width: 72ch; }

.pp-legend{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--fs-sm); color: var(--ink-dim); }
.pp-legend li{ display: inline-flex; align-items: center; gap: var(--s2); white-space: nowrap; }
.pp-legend .k{ width: 12px; height: 12px; flex: none; border-radius: 50%; }
.k-dot{ background: var(--accent); }
.k-open{ background: transparent; box-shadow: inset 0 0 0 2px var(--accent); }
.k-late{ background: transparent; box-shadow: inset 0 0 0 2px var(--warn); }
.k-line{ width: 20px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent)) center / 100% 3px no-repeat; }

.pp-roster{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.pp-div{
  display: grid; gap: var(--s3); align-content: start; min-height: var(--h-touch);
  padding: var(--s4); border: 0; border-radius: var(--r); cursor: pointer;
  background: var(--surface-2); color: inherit; font: inherit; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line);
}
.pp-div-h{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.pp-div-h b{ font-size: var(--fs-base); font-weight: 600; }
.pp-div-h .num{ font-size: var(--fs-lg); font-weight: 500; }
.pp-dots{ display: flex; flex-wrap: wrap; gap: var(--s1); transform-origin: top left; }
.pp-dot{
  width: var(--s2); height: var(--s2); border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--tint);
}
.pp-dot.is-open, .pp-dot.is-late{
  background: transparent; box-shadow: inset 0 0 0 2px var(--accent);
}
.pp-dot.is-late{ box-shadow: inset 0 0 0 2px var(--warn); }
.pp-div[aria-pressed="true"]{ box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 24px var(--glow); background: var(--surface-1); }

.pp-read-line{ margin: var(--s4) 0 0; min-height: 1.5em; font-size: var(--fs-sm); color: var(--ink-dim); max-width: none; }
.pp-read-line b{ color: var(--ink); }
.pp-read-line .num{ color: var(--ink); }
.pp-read-line i{ font-style: normal; color: var(--ink-faint); margin: 0 var(--s1); }

/* --- figures -------------------------------------------------------------- */
.pp-figs{
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s3); margin-bottom: var(--s4);
}
.pp-fig{ display: grid; gap: var(--s1); align-content: start; padding: var(--s4); min-width: 0; }
.pp-fig small{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-dim); }
.pp-fig .fig{ font-size: var(--fs-xl); color: var(--ink); margin: var(--s1) 0; white-space: nowrap; }
.pp-fig:first-child .fig{ font-size: var(--fs-2xl); }
.pp-dir{ display: flex; align-items: center; gap: var(--s1); margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; color: var(--ink-dim); max-width: none; }
.pp-dir .ic{ width: 14px; height: 14px; flex: none; }
.pp-dir.down .ic{ transform: rotate(180deg); }
.pp-dir.ok{ color: var(--ok); } .pp-dir.warn{ color: var(--warn); } .pp-dir.bad{ color: var(--bad); } .pp-dir.flat{ color: var(--ink-dim); }
.pp-quiet{ margin: 0; font-size: var(--fs-sm); line-height: 1.4; color: var(--ink-dim); max-width: none; }
.pp-spark{ height: 28px; margin-top: var(--s2); }
.pp-spark svg{ width: 100%; height: 100%; }

/* --- plots ---------------------------------------------------------------- */
.pp-plot{ position: relative; min-height: 160px; border-radius: var(--r-sm); touch-action: pan-y; cursor: crosshair; outline-offset: 4px; }
.pp-plot > svg{ position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.pp-plot .g{ stroke: var(--line); stroke-width: 1; }
.pp-plot .s-line{ fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.pp-plot .s-area{ stroke: none; }
.pp-plot .st0{ stop-color: var(--accent); stop-opacity: .22; }
.pp-plot .st1{ stop-color: var(--accent); stop-opacity: 0; }
.pp-xticks{ position: absolute; left: 0; right: 0; bottom: 0; height: 18px; pointer-events: none; }
.pp-xticks span{ position: absolute; transform: translateX(-50%); font: 400 var(--fs-micro)/1 var(--font-mono); color: var(--ink-faint); }
.pp-cross{ position: absolute; left: 0; width: 1px; pointer-events: none; background: var(--line-2); transform: translateX(var(--x, 0)); opacity: 0; }
.pp-pin{
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: var(--accent); box-shadow: 0 0 0 3px var(--surface-1), 0 0 12px var(--glow);
  transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(.4);
}
.pp-plot.scrubbing .pp-cross{ opacity: 1; }
.pp-plot.scrubbing .pp-pin{ opacity: 1; transform: translate(calc(var(--x, 0px) - 5px), calc(var(--y, 0px) - 5px)) scale(1); }
.pp-plot.scrubbing .pp-pin[hidden]{ display: none; }
.pp-plot:focus-visible{ outline: 2px solid var(--accent); }

/* --- bento ---------------------------------------------------------------- */
.pp-grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s4); }
.pp-plotcard, .pp-turn, .pp-roles, .pp-train{ grid-column: span 6; min-width: 0; }
.pp-card-h{ display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s2) var(--s3); margin-bottom: var(--s4); }
.pp-card-h h3{ font: 600 var(--fs-lg)/1.25 var(--font-body); letter-spacing: -.01em; }
.pp-card-h .meta{ font-size: var(--fs-sm); }
.pp-plotcard{ display: flex; flex-direction: column; }
.pp-plotcard .pp-legend{ margin-bottom: var(--s2); }

.pp-turn-w{ margin: 0 0 var(--s3); font: 300 var(--fs-xl)/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); max-width: 28ch; }
.pp-turn-w.good{ color: var(--ok); } .pp-turn-w.warnc{ color: var(--warn); }
.pp-turn-w b{ font-weight: 600; }

.pp-role-list{ display: grid; gap: var(--s1); }
.pp-role{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s3);
  width: 100%; min-height: var(--h-touch); padding: var(--s2) var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.pp-role-t{ display: grid; min-width: 0; line-height: 1.3; }
.pp-role-t b{ font-size: var(--fs-base); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-role-t small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.pp-role-d{ display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.pp-role-d b{ font-size: var(--fs-lg); font-weight: 500; }
.pp-role-d small{ font-size: var(--fs-sm); color: var(--ink-dim); }
.pp-role-d.is-late b, .pp-role-d.is-late small{ color: var(--warn); }
.pp-role-d .chip{ font-style: normal; }

.pp-train-b{ display: flex; align-items: center; gap: var(--s5); }
.pp-train-b .ring{ --c: var(--accent); }

.pp-spot{ box-shadow: var(--shadow-2), 0 0 0 2px var(--accent), 0 0 32px var(--glow); }

/* --- hover and press ------------------------------------------------------ */
@media (hover: hover) and (pointer: fine){
  .pp-div:hover{ transform: translateY(-3px); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line-2); }
  .pp-div:hover .pp-dots{ transform: scale(1.03); }
  .pp-roster.is-hot .pp-div:not([aria-pressed="true"]):not(:hover){ opacity: .62; }
  .pp-role:hover{ transform: translateY(-2px); background: var(--surface-2); }
  .pp-fig:hover .pp-dir:not(.flat):not(.down) .ic{ transform: translateY(-2px); }
  .pp-fig:hover .pp-dir.down .ic{ transform: rotate(180deg) translateY(-2px); }
  .pp-fig:hover .pp-dir.flat .ic{ transform: translateX(2px); }
}
.pp-div:active, .pp-role:active{ transform: scale(.97); }

/* --- motion (additive) ---------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .pp-div, .pp-role{
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  }
  .pp-dot{
    opacity: 0; transform: scale(.4);
    transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
    transition-delay: calc(var(--i, 0) * var(--stagger));
  }
  .pp-dots{ transition: transform var(--dur-base) var(--ease-out); }
  .pp-roster.in .pp-dot{ opacity: 1; transform: none; }
  .pp-roster.done .pp-dot{
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .pp-roster.in .pp-dot.is-late{ animation: pp-late calc(var(--ambient-c) / 3) var(--ease-in-out) infinite alternate; }
  @keyframes pp-late{ from{ opacity: 1; } to{ opacity: .35; } }
  .pp-series{ clip-path: inset(-12px 100% -12px -12px); transition: clip-path var(--dur-reveal) var(--ease-out) var(--dur-base); }
  .pp-plot.in .pp-series{ clip-path: inset(-12px -12px -12px -12px); }
  .pp-cross, .pp-pin{ transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out); }
  .pp-dir .ic{ transition: transform var(--dur-base) var(--ease-out); }
  .pp-spot{ transition: box-shadow var(--dur-slow) var(--ease-out); }
  .settled .pp-dot{ opacity: 1; transform: none; transition: transform var(--dur-base) var(--ease-out); }
  .settled .pp-series{ clip-path: none; transition: none; }
}
.motion-paused .pp-dot.is-late{ animation-play-state: paused; }

@media (prefers-reduced-motion: reduce){
  .pp-dot{ opacity: 1; transform: none; }
  .pp-dot.is-late{ animation: none; }
}

/* --- breakpoints ---------------------------------------------------------- */
@media (max-width: 1280px){
  .pp-figs{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
  .pp-plotcard, .pp-turn, .pp-roles, .pp-train{ grid-column: 1 / -1; }
  .pp-roster{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .pp-actions{ width: 100%; }
  #ppAsk{ flex: 1 1 100%; min-height: var(--h-touch); }
  .pp-figs{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
  .pp-fig{ padding: var(--s3); }
  .pp-fig:first-child{ grid-column: 1 / -1; }
  .pp-fig .fig, .pp-fig:first-child .fig{ font-size: var(--fs-xl); }
  .pp-hero{ padding: var(--s4); }
  .pp-div{ padding: var(--s3); }
  .pp-train-b{ flex-direction: column; align-items: flex-start; gap: var(--s4); }
  .pp-turn-w{ font-size: var(--fs-lg); }
  .pp-plot{ min-height: 140px; }
  .pp-role{ grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .pp-role-d{ justify-content: flex-start; }
}