/* ORi web — the Concept Unit component (#106 foundation).
 *
 * One namespace (.concept-*) for the atom every surface renders: a
 * surfaced concept. History adopts it first as the no-visual-change
 * proof (it keeps its legacy .history-* hooks for the not-yet-migrated
 * browser tests; the only visible delta is the pinned type rung). Card
 * (#102), Kept (#107) and Bubble (#108) adopt it next.
 *
 * Also home to the ONE pill primitive (category + status variants) and
 * the per-category locals that bind --cat-color / --cat-fg from the
 * authored map in styles-tokens.css. The category badge background is
 * the single color-mix derivation in the whole codebase — a category's
 * color is defined in exactly one place (the token), tinted here.
 *
 * Loads AFTER styles-bubbles.css / styles-kept.css / styles-render-mode
 * so the pinned type rung + token-driven color win by cascade order
 * over the legacy per-surface rules during the multi-slice transition.
 */

    /* ── Per-category locals: bind the shared --cat-color / --cat-fg ── */
    .cat-technologies        { --cat-color: var(--cat-technologies);       --cat-fg: var(--cat-technologies-fg); }
    .cat-companies_products  { --cat-color: var(--cat-companies_products); --cat-fg: var(--cat-companies_products-fg); }
    .cat-concepts            { --cat-color: var(--cat-concepts);           --cat-fg: var(--cat-concepts-fg); }
    .cat-people_references   { --cat-color: var(--cat-people_references);  --cat-fg: var(--cat-people_references-fg); }
    .cat-compliance_risk     { --cat-color: var(--cat-compliance_risk);    --cat-fg: var(--cat-compliance_risk-fg); }
    .cat-key_numbers         { --cat-color: var(--cat-key_numbers);        --cat-fg: var(--cat-key_numbers-fg); }
    .cat-signal              { --cat-color: var(--cat-signal);             --cat-fg: var(--cat-signal-fg); }

    /* ── The pill primitive ── */
    .pill {
      display: inline-flex; align-items: center;
      font-size: var(--pill-fs); font-weight: 600;
      letter-spacing: 0.5px; text-transform: var(--pill-case);
      padding: var(--pill-pad); border-radius: var(--pill-radius);
      flex-shrink: 0; line-height: 1.4;
    }
    /* category variant — derived tint, names the taxonomy */
    .pill.category {
      background: color-mix(in srgb, var(--cat-color) 18%, var(--surface));
      color: var(--cat-fg);
    }
    /* status variant — filled, names a system action (Auto / Signal / Question) */
    .pill.status {
      background: var(--surface-hi); color: var(--text-2);
      text-transform: none; letter-spacing: 0;
    }

    /* ── The concept unit ── */
    .concept-item { display: flex; align-items: flex-start; gap: 8px; }
    .concept-rail {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0; margin-top: 3px;
      background: var(--cat-color, #4f5a7a);
    }
    .concept-body { flex: 1; min-width: 0; }
    .concept-term { font-size: var(--fs-md); font-weight: 600; color: var(--text); }
    .concept-desc { font-size: var(--fs-sm); color: var(--text-2); }
    .concept-actions { display: flex; align-items: center; gap: 8px; }

    /* ── Token-driven color for the not-yet-restructured surfaces ──
       Card + Kept keep their own anatomy this slice; only their COLOR
       source moves onto --cat-color (the old --c-* / DOT_COLORS /
       .badge-<cat> paths are deleted). */
    .bubble-dot { background: var(--cat-color, #4f5a7a); }
    .kept-dot   { background: var(--cat-color, #4f5a7a); }
    /* #108 — Bubble adopts the unit as color-ONLY: the category rides the
       BORDER (the bubble's analog of the list-surface rail), the term text is
       neutral --text for legibility, and --_glow stays the category color. The
       :hover and html.light border washes are reconciled here (this sheet loads
       last) so the category border survives both states. No name/footer — a
       deliberate, documented exception for the ephemeral, space-constrained
       bubble surface (Signals share the field); the name is recoverable on Keep. */
    .floating-bubble {
      color: var(--text);
      --_glow: var(--cat-color);
      border-color: var(--cat-color, rgba(255, 255, 255, 0.18));
    }
    .floating-bubble:hover { border-color: var(--cat-color, rgba(255, 255, 255, 0.3)); }
    html.light .floating-bubble { border-color: var(--cat-color, rgba(255, 255, 255, 0.5)); }