/* status-pill.css — gf.cx portfolio status-pill primitive
 *
 * A small, mono, uppercase lifecycle badge — the pill that sits under a
 * record title to signal its state (resolved, alerting, in service, …).
 * Lifted from pa.gf.cx /returns/ where each order/return/repair row carries
 * a state pill driven from a JSON state-vocabulary.
 *
 * Variants (semantic, mapped to the active design-system palette):
 *   .status-pill                       base
 *   .status-pill--neutral   (default)  accent-green on faint green tint
 *   .status-pill--alert                gold on gold tint   (needs attention)
 *   .status-pill--resolved             white on accent green · ✓  (closed-good)
 *   .status-pill--service              white on accent green · 🔧 (serviced — a
 *                                      confirmation, so it shares the green; 🔧
 *                                      sets it apart from ✓ resolved)
 *   .status-pill--warning              white on signal-orange · ⚠ (high-visibility
 *                                      warning/danger — the loud tier above alert)
 *
 * Pair with status-pill.js for the data-driven pattern: tag each pill with
 * data-state (+ optional data-detail) and let one JSON vocabulary decide the
 * variant + label. The variant class is the no-JS fallback.
 *
 * ── Active design-system colours referenced here ──────────────────────
 *   --accent        #2c4a3a   deep green   → neutral fg, resolved bg
 *   --gold          #b8862a   gold         → alert
 *   --signal-orange #f5871f   bright orange→ warning/danger (high-visibility)
 *   --ink / --ink-soft / --line  inherited portfolio neutrals
 * Each maps to a portfolio CSS custom property with a hex fallback, so this
 * file themes automatically on any surface that defines the palette and still
 * renders correctly on bare HTML.
 *
 * Import:
 *   <link rel="stylesheet" href="https://assets.gf.cx/status-pill/status-pill.css">
 *   <script src="https://assets.gf.cx/status-pill/status-pill.js" defer></script>
 *
 * v0.1.0 · 2026-06-20
 */

:root {
  --pill-accent:        var(--accent,        #2c4a3a);
  --pill-gold:          var(--gold,          #b8862a);
  --pill-orange:        var(--signal-orange, #f5871f);
  --pill-mono:          var(--mono,          ui-monospace, 'SF Mono', monospace);
  --pill-radius:        12px;

  /* per-variant fg / bg, derived from the palette above */
  --pill-neutral-fg:    var(--pill-accent);
  --pill-neutral-bg:    rgba(44, 74, 58, 0.08);
  --pill-alert-fg:      var(--pill-gold);
  --pill-alert-bg:      rgba(184, 134, 42, 0.10);
  --pill-resolved-fg:   #fff;
  --pill-resolved-bg:   var(--pill-accent);
  /* service is a CONFIRMATION (work done, item returned) → it shares the
   * resolved green; the 🔧 glyph sets it apart from ✓ resolved. The loud orange
   * is reserved for the warning variant below — a warning colour on a positive
   * outcome reads wrong. */
  --pill-service-fg:    #fff;
  --pill-service-bg:    var(--pill-accent);
  --pill-warning-fg:    #fff;
  --pill-warning-bg:    var(--pill-orange);
}

.status-pill {
  display: inline-block;
  font-family: var(--pill-mono);
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: var(--pill-radius);
  /* default = neutral */
  color: var(--pill-neutral-fg);
  background: var(--pill-neutral-bg);
}

.status-pill--neutral {
  color: var(--pill-neutral-fg);
  background: var(--pill-neutral-bg);
}

.status-pill--alert {
  color: var(--pill-alert-fg);
  background: var(--pill-alert-bg);
}

.status-pill--resolved {
  color: var(--pill-resolved-fg);
  background: var(--pill-resolved-bg);
  box-shadow: 0 1px 2px rgba(44, 74, 58, 0.25);
}
.status-pill--resolved::before { content: '✓ '; }

.status-pill--service {
  color: var(--pill-service-fg);
  background: var(--pill-service-bg);
  box-shadow: 0 1px 2px rgba(44, 74, 58, 0.25);
}
.status-pill--service::before { content: '🔧 '; }

.status-pill--warning {
  color: var(--pill-warning-fg);
  background: var(--pill-warning-bg);
  box-shadow: 0 1px 2px rgba(245, 135, 31, 0.30);
}
.status-pill--warning::before { content: '⚠ '; }

@media print {
  .status-pill {
    color: #000 !important;
    background: none !important;
    border: 1px solid #000;
    box-shadow: none !important;
  }
}