/* ============================================================================
   Missing-info status card + field highlight
   Used at the top of a record (transaction detail / drawer) to say what's still
   unfinished, and to point at the exact field that needs it.

   Principles (Peter, 24 Jul 2026 — from user testing):
   - PLAIN LANGUAGE + a count: "Not sorted yet — 3 missing". People read the old
     "Not reconciled yet" as accountant jargon and did NOT connect it to the
     items right underneath, which are the answer. The count makes the list
     below obviously the breakdown.
   - The heading sits in the ORANGE FAMILY (a deeper mix) + an orange count
     badge, so heading and items read as ONE group — but the loud orange stays
     with the items: heading = summary, items = specifics.
   - Item markers are a filled DOT = STATE. A hollow ring read as an empty
     radio/checkbox ("pick one"); these are not inputs.
   - Each item is a BUTTON that scrolls to + flashes its field, physically
     connecting the summary to the answer.
   - A missing FIELD gets a left-edge accent + hairline in the orange family,
     NEVER a fill: three missing items must read as "three things left", not
     three errors. Not yellow (that means "the selected row"), not red (missing
     is unfinished, not wrong). Non-missing fields are never hidden or greyed.
   ============================================================================ */

.txd-status { margin-top: 22px; }
.txd-status--done .txd-status__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); border: var(--border-width) solid color-mix(in srgb, var(--color-success) 32%, transparent); color: var(--color-success); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.txd-status--done .txd-status__pill svg { width: 16px; height: 16px; flex: none; }
/* WAITING — filed, nothing for the user to do, not done either ("Waiting for
   Revenue"). Quiet grey so it carries no urgency (Peter, 31 Jul — the status
   card went global onto the return/invoice/payslip detail panels). */
.txd-status--wait .txd-status__pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--color-bg-subtle-light, #f7f7f7); border: var(--border-width) solid var(--color-border); color: var(--color-text-muted); font-weight: var(--weight-medium); font-size: var(--text-sm); }
.txd-status--todo { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); padding: 20px 22px; background: var(--color-surface); }
.txd-status__label { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: color-mix(in srgb, var(--color-active) 34%, var(--color-text)); margin-bottom: 16px; }
.txd-status__count { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-active); background: color-mix(in srgb, var(--color-active) 12%, var(--color-surface)); border: var(--border-width) solid color-mix(in srgb, var(--color-active) 28%, transparent); border-radius: var(--radius-full); padding: 2px 9px; white-space: nowrap; flex: none; }
.txd-status__missing { display: flex; flex-wrap: wrap; gap: 14px 26px; }

.txd-miss { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--color-active) 62%, var(--color-text)); font-size: var(--text-sm); }
.txd-miss::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-active); flex: none; }
/* Items jump to their field — give them a real button affordance. */
.txd-miss--jump { cursor: pointer; background: none; border: none; padding: 0; font: inherit; text-align: left; border-radius: var(--radius-sm); }
.txd-miss--jump:hover { text-decoration: underline; }
.txd-miss--jump:focus-visible { outline: 2px solid var(--color-hilite-strong); outline-offset: 3px; }

/* The field that still needs finishing — restrained left-edge accent, no fill. */
.txd-field--missing { position: relative; padding-left: 12px; border-left: 3px solid var(--color-active); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.txd-field--missing .tx-dd__btn, .txd-field--missing .input { border-color: color-mix(in srgb, var(--color-active) 46%, var(--color-border)); }
/* Flash when jumped to from the summary card, then settle back (rings flash, never stay). */
.txd-field--flash { animation: txdFieldFlash 1.5s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes txdFieldFlash {
  0%, 32% { background: color-mix(in srgb, var(--color-active) 13%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { .txd-field--flash { animation: none; } }