/* ============================================================================
   Badges — score, confidence, risk, context, status, tag
   --------------------------------------------------------------------------
   Five families, one shape language: a pill with a soft background and a
   matching foreground, both drawn from the same semantic token pair.
   ========================================================================== */

.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-pill);
    font-weight: var(--weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-tight);
}
.score-a { background: var(--success-soft); color: var(--success-on-soft); }
.score-b { background: var(--info-soft); color: var(--info-on-soft); }
.score-c { background: var(--warning-soft); color: var(--warning-on-soft); }
.score-d { background: var(--severe-soft); color: var(--severe-on-soft); }
.score-f { background: var(--danger-soft); color: var(--danger-on-soft); }
.score-badge-sm { font-size: var(--text-2xs); padding: var(--space-px) var(--space-4); min-width: 28px; }

.confidence-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-px) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}
.confidence-high { background: var(--success-soft); color: var(--success-on-soft); }
.confidence-medium { background: var(--warning-soft); color: var(--warning-on-soft); }
.confidence-low { background: var(--danger-soft); color: var(--danger-on-soft); }
.confidence-na { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.score-row-na { opacity: 0.6; }

.risk-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
}
.risk-none { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.risk-low { background: var(--success-soft); color: var(--success-on-soft); }
.risk-medium { background: var(--warning-soft); color: var(--warning-on-soft); }
.risk-high { background: var(--severe-soft); color: var(--severe-on-soft); }
.risk-critical { background: var(--danger-soft); color: var(--danger-on-soft); }

.context-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    background: var(--neutral-soft);
    color: var(--text-body);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) var(--space-5);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

/* === A pill is one word, on one line ========================================
   .data-table cells carry overflow-wrap: anywhere so an address or a clone URL
   can fold rather than push the last columns off the card. Inside a pill that
   licence is wrong: the four families below hold a closed vocabulary of single
   words, and a column squeezed by a wide neighbour was folding them one letter
   per line inside a round background, which reads as a rendering fault rather
   than as a status. Each of these words fits; refusing to wrap them costs a few
   pixels of column width and nothing else.

   .context-badge is deliberately not here. It carries a written phrase rather
   than a term from a list, and a phrase that cannot wrap does not shrink, it
   escapes its cell. Anything new that holds free text belongs with it.

   One table opts out: .arch-violations td .status-badge in components-tables.css
   carries rule names rather than lifecycle words, and it keeps its own wrapping
   by being the more specific selector. */
.score-badge, .confidence-badge, .risk-badge, .status-badge { white-space: nowrap; }
/* Repository lifecycle */
.status-pending { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.status-cloning, .status-pulling { background: var(--info-soft); color: var(--info-on-soft); }
.status-cloned { background: var(--success-soft); color: var(--success-on-soft); }
.status-parsed { background: var(--success-soft); color: var(--success-on-soft); }
.status-clonefailed, .status-parsefailed,
.status-pullfailed, .status-branchscanfailed { background: var(--danger-soft); color: var(--danger-on-soft); }
.status-parsing, .status-scanningbranches { background: var(--info-soft); color: var(--info-on-soft); }
/* Job lifecycle */
.status-queued { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.status-running { background: var(--info-soft); color: var(--info-on-soft); }
.status-completed { background: var(--success-soft); color: var(--success-on-soft); }
.status-failed { background: var(--danger-soft); color: var(--danger-on-soft); }
.status-cancelled { background: var(--warning-soft); color: var(--warning-on-soft); }
/* A flow step a condition declined to run. Neutral rather than green: it did nothing, and a run that
   skipped work must not read as a run that did it. */
.status-skipped { background: var(--neutral-soft); color: var(--neutral-on-soft); }
/* Branch lifecycle — merged, or how long an unmerged branch has been quiet. */
.status-merged { background: var(--success-soft); color: var(--success-on-soft); }
.status-open { background: var(--info-soft); color: var(--info-on-soft); }
.status-stale { background: var(--warning-soft); color: var(--warning-on-soft); }
.status-dead { background: var(--danger-soft); color: var(--danger-on-soft); }
/* Deleted from the remote with nothing on the default branch to show for it. Neutral, not red: the
   branch is gone rather than neglected, and nobody can act on it. */
.status-gone { background: var(--neutral-soft); color: var(--neutral-on-soft); }
/* The default branch, named. Outlined rather than filled, because it is the line the four states
   above are measured from and not a fifth state alongside them: it reads as the axis, not the data.
   Monospace, because what it carries is a ref name. */
.status-root {
    background: transparent;
    color: var(--text-muted);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    font-family: var(--font-mono);
}
/* Repository pulse — how long since anybody committed, as a row badge. The canvas draws the same four
   bands on .canvas-pulse with its own colours; these are the table-row spelling of them, so a screen
   showing a sync status and a pulse in adjacent columns speaks one badge vocabulary.
   Severe rather than danger for dormant: a released library going quiet is a fact, not a fault. */
.status-active { background: var(--success-soft); color: var(--success-on-soft); }
.status-dormant { background: var(--severe-soft); color: var(--severe-on-soft); }
.status-unknown { background: var(--neutral-soft); color: var(--neutral-on-soft); }
/* Developer goals */
.status-proposed { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.status-agreed { background: var(--info-soft); color: var(--info-on-soft); }
.status-achieved { background: var(--success-soft); color: var(--success-on-soft); }
.status-missed { background: var(--danger-soft); color: var(--danger-on-soft); }
/* === Tones, which are what every rule above actually is =====================
   Five classes carrying a semantic colour pair and nothing else. Worn beside
   `.status-badge`, as `class="status-badge tone-success"`.

   THIS IS THE VOCABULARY FOR NEW WORK. The thirty-two `.status-*` names above
   are one domain word each mapped to one of these five pairs, which makes that
   block an alias table rather than a set of components, and it grows by one
   every time any product invents a lifecycle. Two products reached that
   conclusion independently before this was written.

   The deeper reason is ADR 0021's own rule: a file belongs in the stylebook
   when it would be identical in a product that does not exist yet. Which tone a
   domain word deserves is NOT identical across products. That a dropped ticket
   is neutral and never red, because deciding not to do something is not a
   failure, is CkPlan's judgement about CkPlan's vocabulary, and it was living in
   a shared stylesheet where CkPlan could neither see it nor test it. The
   mapping belongs in the product, next to the enum it maps.

   MIGRATION, so this does not become two ways to do one thing forever. New
   vocabularies use tones and add no nouns. An existing product moves its own
   nouns to tones in one deliberate commit and deletes them from here in the
   same commit, the way CkPlan's five went when tones landed. The block above
   only shrinks. When it empties, this comment goes with it. */
.tone-neutral { background: var(--neutral-soft); color: var(--neutral-on-soft); }
.tone-info { background: var(--info-soft); color: var(--info-on-soft); }
.tone-success { background: var(--success-soft); color: var(--success-on-soft); }
.tone-warning { background: var(--warning-soft); color: var(--warning-on-soft); }
.tone-danger { background: var(--danger-soft); color: var(--danger-on-soft); }

.tag {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    background: var(--surface-sunken);
    color: var(--text-body);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}