/**
 * Status chip (L3): invoices, estimates and subscriptions, on app pages and on the client's document pages,
 * and the detail card behind it (fragments/status-card.html, js/status-card.js).
 * Markup: fragments/status-chip.html (chip / chip-lg / glyph). The Orbit glyph's shape carries the
 * state, data-tone the health. Tone as text is mixed toward ink so it clears 4.5:1 (raw gold does not).
 * Mirrors the "document status" block in docs/mocks/app/assets/css/billgrid.css.
 * Unlayered, like the other components; class names are unique to this component, so no body scope is needed.
 */
[data-tone="neutral"] { --c: var(--text-soft); }
[data-tone="info"]    { --c: var(--sent-fg); }
[data-tone="attn"]    { --c: var(--partial-fg); }
[data-tone="danger"]  { --c: var(--overdue-fg); }
[data-tone="success"] { --c: var(--paid-fg); }
[data-tone="done"]    { --c: var(--billed-fg); }

.st-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--icon-gap-xs);
  padding: 1px 8px 1px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  background: color-mix(in srgb, var(--c) 8%, var(--bg-panel));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
  color: color-mix(in srgb, var(--c) 70%, var(--ink));
}

.st-chip .meta {
  font-weight: 400;
  color: color-mix(in srgb, var(--c) 50%, var(--text-soft));
  font-variant-numeric: tabular-nums;
}

.st-chip.lg {
  font-size: 13px;
  padding: 2px 9px 2px 7px;
  gap: 6px;
}

.st-g {
  width: 14px;
  height: 14px;
  flex: none;
  display: block;
  overflow: visible;
  color: var(--c);
}

.st-chip.lg .st-g {
  width: 16px;
  height: 16px;
}

.st-g .knock {
  stroke: var(--bg-panel);
  fill: none;
}

.st-g .knock-f {
  fill: var(--bg-panel);
}

/* The eye-off mark: overdue, unpaid and never opened. */
.st-chip .st-flag {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  flex: none;
  color: color-mix(in srgb, var(--c) 70%, var(--ink));
}

.st-chip[data-status-card] {
  cursor: default;
}

.st-chip[data-status-card]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 0 0 2px var(--gold);
}

/* The detail card: the state for this record in one sentence, then its recent events and what comes next. */
.hc {
  position: fixed;
  z-index: var(--z-dropdown, 30);
  width: 290px;
  padding: 12px 14px 10px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}

.hc.on {
  opacity: 1;
  transform: none;
}

.hc-h {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--fs-ui);
}

.hc-h .who {
  margin-left: auto;
  font-weight: 400;
  color: var(--text-soft);
  font-size: var(--fs-xs);
}

.hc-s {
  margin: 3px 0 10px 21px;
  color: var(--text-muted);
  line-height: 1.45;
}

.hc-t {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid var(--border-soft);
}

.hc-t li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 7px;
  align-items: center;
  color: var(--text);
}

.hc-t li .d {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sand-300);
  justify-self: center;
}

.hc-t li.now .d {
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent);
}

.hc-t li time {
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .hc {
    transition: none;
  }
}