@layer legacy {
/* SUBAGENT COUNT - the running-subagent chip beside a session's status
 * light, its rollup on a group heading, and the running-sessions total
 * (issues #747, #748).
 *
 * ONE STYLESHEET FOR BOTH TREES. The legacy sidebar row builds this chip
 * as an HTML string (web/src/lib/sidebar-shell/row-chips.ts) and the
 * compiled running-sessions cell draws it as a component
 * (web/src/lib/subagents/SubagentBadge.svelte); both wear these classes so
 * the two cannot drift apart.
 *
 * THE LOOK, copied from the ledger's state chip (.ledger-chip,
 * web/src/lib/ledger/LedgerCards.svelte): a 1px edge in the signal colour
 * at 45%, small square corners, small tracked capitals, mono type. The
 * signal is the WORKING hue (--oc-green), because a running subagent is
 * work (Joe (ccsliinc), 2026-09-26). It sits BESIDE the light and never
 * paints on it: the light's two rings keep their meaning
 * (docs/DECISIONS.md, 2026-09-09).
 *
 * Colour is --oc-* tokens only, so every shipped theme re-derives it. */

.subagent-count {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 16px;
    padding: 0 4px;
    margin: 0 2px;
    border: 1px solid color-mix(in srgb, var(--oc-green) 45%, transparent);
    border-radius: var(--oc-radius-sm, 2px);
    background: transparent;
    color: var(--oc-green);
    font-family: var(--font-mono, monospace);
    font-size: var(--oc-fs-micro, 10px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: var(--oc-tracking-label, 0.6px);
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* THE CLICKABLE CHIP opens the read-only list. A quiet outline control,
 * the restart picker's secondary shape: hover lifts the ground, focus is
 * the 2px cyan outline every control here uses, never an accent ring. */
.subagent-count--button {
    cursor: pointer;
    font: inherit;
    font-family: var(--font-mono, monospace);
    font-size: var(--oc-fs-micro, 10px);
}

.subagent-count--button:hover {
    background: var(--oc-ground-hover);
}

/* A ROLLUP IS A SUM, NOT A CONTROL: no edge, so it never reads as a
 * second button on a heading that is itself the fold toggle. */
.subagent-count--rollup {
    border-color: transparent;
    padding: 0 2px;
}

/* THE DETAILED ROW'S INLINE COUNT (issue #848, owner: "just put the
 * subagent count on the session line as a green # to the right of the
 * agent icon"). No border, no background, no click target - a bare
 * number, unlike `.subagent-count` above. Still the WORKING hue
 * (--oc-green), for the same reason: a running subagent is work. A later
 * colour for a different kind of run (a workflow) is ONE MODIFIER CLASS
 * that overrides `color` alone, e.g. `.session-row__subagent-count--workflow`
 * - never a second element or a second function. */
.session-row__subagent-count {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 2px;
    color: var(--oc-green);
    font-family: var(--font-mono, monospace);
    font-size: var(--oc-fs-micro, 10px);
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* THE WORKFLOW VARIANT (issue #852, Adam (Adoom666), 2026-09-26: "if
 * using workflows, make the subagent counter next to the agent icon blue
 * instead of green"). The notice hue, --oc-cyan, the one blue the palette
 * derives from each theme's --color-info. Colour only. */
.session-row__subagent-count--workflow {
    color: var(--oc-cyan);
}
}