/* ==========================================================================
   UBM — page-people.css
   /people, plus the canonical stroke + draw rules for the character library
   in assets/js/characters.js. The admin preview links THIS file rather than
   duplicating the rules — see CHARACTER_STYLESHEET in characters.js.

   Reused from sections.css, not re-declared here:
     .page-hero  .person-card (+ __frame __name __role __power __power-label)
     .filter-bar (+ __group __chip)   .empty-state   .cta-band   .section-foot

   Tokens only. Logical properties only.
   ========================================================================== */

/* ==========================================================================
   1. THE CHARACTER
   <svg class="ch ch--rack" viewBox="0 0 128 152">
     <path class="ch-s ch-l" pathLength="1" style="--ch-i:0">
     <circle class="ch-p ch-fa" style="--ch-i:9">
   The figure is drawn stroke by stroke once .is-drawn lands on the <svg>.
   ========================================================================== */

.ch {
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  /* 1.1 user units over a 128-wide viewBox renders at roughly 1.5px at the
     card sizes used below — a true hairline without non-scaling-stroke,
     which browsers apply inconsistently to dash patterns. */
  --ch-weight: 1.1;
  --ch-step: calc(var(--stagger) * 0.26);
}

/* --ch-len is written per element by prepareCharacter(). The fallback is
   deliberately larger than any stroke in the library, so a figure that has
   not been measured yet stays invisible instead of flashing a dotted line. */
.ch-s {
  fill: none;
  stroke-width: var(--ch-weight);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--ch-len, 999);
  stroke-dashoffset: var(--ch-len, 999);
  transition: stroke-dashoffset var(--d-reveal) var(--e-out) calc(var(--ch-i, 0) * var(--ch-step));
}
.ch.is-drawn .ch-s { stroke-dashoffset: 0; }

.ch-p {
  stroke: none;
  opacity: 0;
  transition: opacity var(--d-base) var(--e-out) calc(var(--ch-i, 0) * var(--ch-step));
}
.ch.is-drawn .ch-p { opacity: 1; }

/* Colour: silver line work, gold for the prop, one cyan element that is
   "live". Three colours per figure, never more. */
.ch-l  { stroke: color-mix(in srgb, var(--c-silver-300) 80%, transparent); }
.ch-d  { stroke: color-mix(in srgb, var(--c-silver-500) 48%, transparent); }
.ch-g  { stroke: var(--c-gold-400); }
.ch-a  { stroke: var(--c-signal-400); }
.ch-fl { fill: color-mix(in srgb, var(--c-silver-300) 85%, transparent); }
.ch-fg { fill: var(--c-gold-400); }
.ch-fa { fill: var(--c-signal-400); }

/* No JavaScript, or reduced motion: the figure is simply there. */
html:not(.js) .ch-s { stroke-dashoffset: 0; }
html:not(.js) .ch-p { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .ch-s { stroke-dashoffset: 0; }
  .ch-p { opacity: 1; }
}

/* ==========================================================================
   2. THE GRID
   <ul class="people-grid"><li><article class="person-card">…</article></li></ul>
   ========================================================================== */

.people-grid {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 48rem)  { .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 75rem)  { .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 25rem)  { .people-grid { grid-template-columns: minmax(0, 1fr); } }

/* The plate the character is drawn on: a darker bed so gold and cyan carry,
   plus the rack-unit ruling .person-card__frame already establishes. */
.person-card__frame {
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent 11px,
      color-mix(in srgb, var(--c-signal-500) 7%, transparent) 11px,
      color-mix(in srgb, var(--c-signal-500) 7%, transparent) 12px),
    radial-gradient(ellipse 78% 62% at 50% 42%,
      color-mix(in srgb, var(--c-ink-700) 60%, transparent), transparent 76%),
    var(--c-ink-950);
  border-color: color-mix(in srgb, var(--c-paper-000) 12%, transparent);
  transition: border-color var(--d-base) var(--e-out);
}
.person-card:hover .person-card__frame,
.person-card:focus-within .person-card__frame {
  border-color: var(--line-gold);
}

.person-card__figure {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
}

/* A row that ships its own line-art SVG uses it instead of the library. */
.person-card__art {
  inline-size: auto;
  block-size: 100%;
  max-inline-size: 100%;
  object-fit: contain;
}

/* Placeholder until the module mounts — and the whole picture if it never
   does. The open arc from the mark, not an empty plate. */
.person-card__mark {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  fill: none;
  stroke: var(--line-gold);
  stroke-width: 1;
}

/* Corner registration index, the same mark the drawing sheet uses. */
.person-card__index {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  color: color-mix(in srgb, var(--c-gold-400) 70%, transparent);
  font-variant-numeric: tabular-nums;
}

.person-card__dept {
  position: absolute;
  inset-block-end: var(--sp-3);
  inset-inline-start: var(--sp-3);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-silver-500) 80%, transparent);
}

.person-card__head { display: grid; gap: var(--sp-1); }

.person-card__link {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  transition: color var(--d-fast) var(--e-out);
}
.person-card__link:hover { color: var(--accent-text); }

/* ==========================================================================
   3. FILTER RAIL  (extends .filter-bar from sections.css)
   ========================================================================== */

.people-filter { margin-block-end: var(--sp-8); }
.people-filter__count {
  font-size: var(--fs-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.people-hint {
  margin-block-start: var(--sp-5);
  font-size: var(--fs-2xs);
  color: var(--text-faint);
}

/* ==========================================================================
   4. DESIGNED EMPTY STATE
   Not a shrug — the four sample figures show exactly what a published row
   turns into, which is the most useful thing an empty page can do.
   ========================================================================== */

.people-empty {
  display: grid;
  gap: var(--sp-7);
  padding: var(--sp-8) var(--sp-6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%,
      color-mix(in srgb, var(--c-ink-700) 45%, transparent), transparent 74%),
    var(--surface-sunken);
}
.people-empty__copy { display: grid; gap: var(--sp-3); justify-items: start; max-inline-size: 56ch; }
.people-empty__title { font-size: var(--fs-xl); }
.people-empty__body  { font-size: var(--fs-sm); color: var(--text-muted); }

.people-empty__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
}
@media (min-width: 48rem) { .people-empty__row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.people-empty__slot {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  opacity: .5;
}
.people-empty__slot .ch { --ch-weight: 1; }

/* ==========================================================================
   5. CLOSING RAIL
   ========================================================================== */

.people-foot {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
  max-inline-size: 46rem;
}