/* ============================================================================
   STATUS PILL — the one status marker in the app
   ----------------------------------------------------------------------------
   A coloured dot + a DASHED coloured outline, no fill. Peter chose this set on
   the invoice dashboard on 9 Jul ("Fresh dashed"), deepened a shade on 10 Jul
   because the first pass read candy, and it is the one bit of colour on a list
   screen he actually likes. It works because the same element repeats down a
   column, so the colours become a legend you scan rather than decoration.

   It lived inline on invoice-home-settings.html. This file is that block moved
   out unchanged, so the dashboard's task rows use the SAME component rather
   than a near-copy — `.inv-row-status` is kept as an alias so no invoice JS
   changes and nothing about that screen moves.

   THE VOCABULARY IS SHARED (Peter, 29 Jul). One legend across every list:
     Overdue        danger   a date has passed
     Due / Due in N attention a date is coming
     Done           success  finished, nothing to do
     everything else grey    no deadline — "When you can", "Watching"

   Grey is the default and carries no alarm. Colour appears only where it means
   something, which is why one amber pill among seven grey ones is findable from
   across the room.

   The hexes are Peter-chosen, not Figma semantic tokens, and are scoped to the
   pill on purpose — global tokens are untouched.
   ============================================================================ */
.status-pill,
.inv-row-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: 2px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px dashed var(--color-text-muted);
  color: var(--color-text);
  white-space: nowrap;
}
.inv-row-status { margin-left: 10px; }

.status-pill::before,
.inv-row-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex: none;
}

.status-pill--paid,     .inv-row-status--paid     { border-color: #0e9f6e; }
.status-pill--paid::before,     .inv-row-status--paid::before     { background: #0e9f6e; }
.status-pill--overdue,  .inv-row-status--overdue  { border-color: #e11d48; }
.status-pill--overdue::before,  .inv-row-status--overdue::before  { background: #e11d48; }
.status-pill--due,      .inv-row-status--due      { border-color: #d97706; }
.status-pill--due::before,      .inv-row-status--due::before      { background: #d97706; }

/* Aliases so a task board can say what it means without borrowing invoice words. */
.status-pill--done      { border-color: #0e9f6e; }
.status-pill--done::before      { background: #0e9f6e; }
.status-pill--attention { border-color: #d97706; }
.status-pill--attention::before { background: #d97706; }

/* UNREAD — a different axis from the rest of this legend (Peter, 20 Aug 2026).
   Every pill above describes THE THING: a date passed, a date coming, finished.
   "Unread" describes YOU — whether you have looked at it yet — and it has no
   deadline at all, so by the legend above it would have to be grey, which makes
   it invisible among the other greys.

   So it earns its signal from WEIGHT, not hue: solid ink instead of a dashed
   outline. It is findable at a glance, and it does not steal a colour that means
   a date. The red dot on the inbox door is a notification badge — a different
   vocabulary again, and the one convention every person already knows. */
.status-pill--unread {
  background: var(--color-text);
  border: 1px solid var(--color-text);
  color: #fff;
}
.status-pill--unread::before { background: #fff; }