/* ============================================================
   payroll/payroll.css — /payroll/ 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 period line,
   the row link, and how the BKO premium reads as its own figure
   without ever borrowing Ember.

   No hex. Every colour / space / radius / font is a var(--token).
   Ember (--accent / --sev-kosong) means the worst state and
   nothing else — a healthy payroll total is never warm, and this
   file never reaches for it. See ../../CLAUDE.md rule 3 and
   ../PLAN-V2.md's gates.
   ============================================================ */

.pr-period {
  font-size: var(--text-small);
  color: var(--muted);
  margin-bottom: var(--space-4);
}

/* ---- the worker link — every row answers "whose shift was this" -------
   Underlined like any other in-page link (site.css/.link-door), never a
   button or a coloured chip: the row is a fact with a source, not a call
   to action. */
.pr-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 2px;
}

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

/* ---- the BKO premium — legible as its own column, never folded into
   the total, and never coloured. Weight is the only thing that marks it:
   present amounts sit at normal weight in ink; absent ones (most rows)
   are a plain em dash in --faint, read as "not applicable" rather than
   "zero rupiah". Position/weight, not hue, per design-discipline §2. */
.pr-premium { color: var(--faint); }

.pr-premium--active {
  color: var(--ink);
  font-weight: 600;
}

/* ---- the row's own answer — heavier than the other numbers because it
   is the number the row exists to produce, not because anything is wrong. */
.pr-total {
  font-weight: 600;
  color: var(--ink);
}

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

.pr-note a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The BKO lede. Plain ink, no warm colour: the premium is not an exception
   state, it is the fact the page exists to show. */
.pr-lede {
  margin: var(--space-4) 0 var(--space-6);
  max-width: var(--measure-prose);
  color: var(--ink-2);
}
.pr-lede b { color: var(--ink); font-weight: 600; }