/* ============================================================================
   components.css — shared UI kit for the PI-EMB tools (Digitizer + Stitch Judge)
   ----------------------------------------------------------------------------
   Phase 2 of the Forge <-> Judge design unification. Token-only recipes (from
   tokens.css) under a `.ui-*` namespace. BOTH tools link this file; it is skinned
   by whatever accent the host sets — Digitizer = Wine Plum, Judge = teal (--thread).

   Compose these for NEW UI instead of re-authoring buttons/tabs/pills/etc. Existing
   markup keeps its own classes (already token-consistent from Phase 1) and can migrate
   onto `.ui-*` incrementally. Accent only via var(--accent); state via --good/--focus/
   --issue. Active state = `.is-active`.
   ========================================================================== */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ui-btn {
  font: 600 .86rem/1.15 var(--sans);
  padding: 9px 18px;
  border: 1px solid var(--accent);
  border-radius: var(--r-ctrl);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), filter var(--dur);
}
.ui-btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.ui-btn:active:not(:disabled) { filter: brightness(.97); }
.ui-btn:disabled { opacity: .4; cursor: default; }
.ui-btn--ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--raised); color: var(--ink); }
.ui-btn--sm { padding: 6px 13px; font-size: .78rem; }

/* ── Tabs (underline) ────────────────────────────────────────────────────── */
.ui-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.ui-tab {
  padding: 9px 14px; margin-bottom: -1px;
  font: 600 .84rem var(--sans); color: var(--muted);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  transition: color var(--dur), border-color var(--dur);
}
.ui-tab:hover:not(.is-active) { color: var(--ink); }
.ui-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Segmented toggle ────────────────────────────────────────────────────── */
.ui-seg {
  display: inline-flex; gap: 3px; padding: 3px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-ctrl);
}
.ui-seg > button {
  border: 0; background: none; color: var(--muted); cursor: pointer;
  border-radius: calc(var(--r-ctrl) - 3px); padding: 5px 12px; font: 600 .8rem var(--sans);
}
.ui-seg > button.is-active { background: var(--accent); color: #fff; font-weight: 700; }

/* ── Pill / chip ─────────────────────────────────────────────────────────── */
.ui-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--raised); color: var(--muted);
  font: 600 .78rem var(--sans); cursor: pointer; transition: background var(--dur), color var(--dur);
}
.ui-pill:hover:not(.is-active) { background: var(--paper); }
.ui-pill.is-active { background: var(--accent); border-color: var(--accent-hover); color: #fff; }

/* ── Card / stat ─────────────────────────────────────────────────────────── */
.ui-card {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-subtle);
}
.ui-stat { padding: 12px 14px; text-align: center; }
.ui-stat b {
  display: block; font: 800 1.2rem/1 var(--mono); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ui-stat span {
  font: 700 .6rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ── Badge (semantic — state, not brand) ─────────────────────────────────── */
.ui-badge {
  display: inline-block; padding: 2px 9px; border-radius: var(--r-tag);
  font: 700 .68rem var(--mono); letter-spacing: .05em; text-transform: uppercase;
}
.ui-badge--neutral { background: var(--paper);      color: var(--muted);     border: 1px solid var(--line); }
.ui-badge--good    { background: var(--good-soft);  color: var(--good-ink);  }
.ui-badge--warn    { background: var(--focus-soft); color: var(--focus-ink); }
.ui-badge--issue   { background: var(--issue-soft); color: var(--issue-ink); }
.ui-badge--accent  { background: var(--accent);     color: #fff; }

/* ── Metric bar (EDS axes, complexity, progress) ─────────────────────────── */
.ui-bar {
  position: relative; height: 7px; border-radius: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 78%, var(--paper));
}
.ui-bar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: var(--accent); transition: width var(--dur); }
.ui-bar > i.is-good { background: var(--good); }
.ui-bar > i.is-warn { background: var(--focus); }
.ui-bar > i.is-low  { background: var(--issue); }

/* ── Circular canvas control (Judge-style preview chrome) ────────────────── */
.ui-circ {
  width: 40px; height: 40px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: rgba(255,255,255,.94); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-float); cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.ui-circ:hover:not(.is-active) { background: #fff; }
.ui-circ.is-active { background: var(--accent); border-color: var(--accent-hover); color: #fff; }

/* ── Input ───────────────────────────────────────────────────────────────── */
.ui-input {
  width: 100%; padding: 7px 10px; font: .84rem var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctrl);
}
.ui-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }