@layer legacy {
/* TIMER CHIP - the clock chip beside a session's subagent chip: the time
 * to its next live timer ("18m"), or the live count (issue #893).
 *
 * ONE STYLESHEET FOR BOTH TREES, like subagent-count.css: 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/timers/TimerBadge.svelte).
 *
 * THE LOOK is the subagent chip's (.subagent-count, itself the ledger's
 * state chip): a 1px edge at 45%, small square corners, small tracked
 * capitals, mono type. CALM BY DEFAULT: a timer is a fact about the
 * future, not work and not a question, so it wears the quiet secondary
 * text token rather than a signal hue. It sits BESIDE the light and never
 * paints on it, and it does not feed the light or the idle clock.
 *
 * Colour is --oc-* tokens only, so every shipped theme re-derives it. */

.timer-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
    height: 16px;
    padding: 0 4px;
    margin: 0 2px;
    border: 1px solid color-mix(in srgb, var(--oc-text-secondary) 45%, transparent);
    border-radius: var(--oc-radius-sm, 2px);
    background: transparent;
    color: var(--oc-text-secondary);
    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 clock glyph: a 1px outline drawn in the text colour. */
.timer-chip__glyph {
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: square;
}

/* THE CLICKABLE CHIP opens the read-only list: the subagent chip's quiet
 * outline control, hover lifts the ground, focus is the 2px cyan outline. */
.timer-chip--button {
    cursor: pointer;
    font: inherit;
    font-family: var(--font-mono, monospace);
    font-size: var(--oc-fs-micro, 10px);
}

.timer-chip--button:hover {
    background: var(--oc-ground-hover);
    color: var(--oc-text-primary);
}
}