/* ============================================================
   petugas/petugas.css — /petugas/ only. Chrome (top bar, nav,
   page head, footer, table) lives in ../app/shell.css; this file
   holds only what is specific to this surface: the worker link,
   the stacked document list per row, and its status pills reuse
   the existing .pill / .pill--kosong / .pill--tunggu / .pill--calm
   from ../style.css rather than inventing a second severity device.

   What this page answers (../PLAN-V2.md): "siapa saja orang kita,
   dan dokumen siapa yang mau habis." The Dokumen column sits
   immediately after Petugas, ahead of Layanan/Wilayah/Bergabung,
   on purpose — position is the currency here (design-discipline
   §2), and the whole reason this page exists is a lapsed document,
   not a roster fact. Rows are also sorted worst-document-first, so
   the two together (position + order) make the fact findable
   without reading past the first screenful.

   No hex. Every colour / space / radius / font is a var(--token).
   Ember (--sev-kosong / --pill--kosong) means a document already
   past its expiry and nothing else; --sev-tunggu marks one expiring
   soon. A valid document is the neutral ramp (pill--calm), never
   green — see ../../CLAUDE.md rule 3 and ../PLAN-V2.md's gates.
   ============================================================ */

/* ---- the worker link — same idiom as payroll's .pr-link: an
   underlined fact with a source, not a button or a coloured chip. ---- */
.pt-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .pt-link:hover { text-decoration-color: var(--ink); }
}

/* ---- the document column — one worker can hold more than one
   document, so each row's cell stacks them, worst first. white-space
   is reset to normal here because ../app/shell.css sets nowrap on
   every table cell by default (right for single figures, wrong for
   a document name that must wrap inside a narrow column instead of
   forcing the whole table wider). ---- */

.pt-docs {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  white-space: normal;
}

.pt-doc {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  white-space: normal;
  max-width: 220px;
}

.pt-doc__type {
  font-size: var(--text-small);
  color: var(--ink-2);
}

/* ---- the roster summary above the table, plain ink like the
   payroll/absensi ledes — colour belongs to the pills on the rows
   themselves, not to prose stating a count. ---- */
.pt-lede {
  margin: var(--space-4) 0 var(--space-6);
  max-width: var(--measure-prose);
  color: var(--ink-2);
}
.pt-lede b { color: var(--ink); font-weight: 600; }

.pt-note {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  color: var(--faint);
  max-width: var(--measure-prose);
}

/* A valid document is not an event. Plain meta text, no box. */
.pt-docdate {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--muted);
}