/*
 * fpmLabels.css — Label / pill / chip / dot / meta primitives.
 *
 * Load after fpmConsole.css in the same slot.
 *
 * Primitives owned here:
 *   .fpm-chip       — mono dot-prefixed inline status pill
 *   .fpm-status-dot        — 8px data-driven status dot (replaces .status-dot)
 *   .fpm-status-dot--sm    — 6px companion dot (canonical size variant)
 *   .fpm-trigger-tag       — mono trigger type tag (manual / api)
 *   .fpm-intensity-tag     — mono intensity tag (active_full / active_light / passive)
 *   .fpm-pill-bar          — segmented filter bar
 *   .fpm-meta-row          — horizontal key/value meta row
 *   .fpm-form-label        — sentence-case form/section label
 *   .fpm-chip          — category/filter chip with --fpm-tag-color hue
 *
 * Token rules: --fpm-* only. Zero raw hex. Reduce-motion guards required
 * for every new animation.
 *
 * Catalog: design-system/CONSOLE.md — LABELS section.
 */

/* 1. STATUS PILL — mono dot-prefixed pill. State via [data-st]. */

/* Core states */

/* Extended states — canvas / storage / scanning consumers. */

/* 2. STATUS DOT — data-driven dot. State via [data-st]. */

/* 8px canonical dot. Size overridable via --fpm-status-dot-size. A healthy light breathes and a
   broken one pulses; both animate a ring that scales and fades, which stays on the compositor. */
.fpm-status-dot {
    --fpm-status-dot-size: 8px;
    --fpm-dot: var(--fpm-text-faint);
    position: relative;
    width: var(--fpm-status-dot-size);
    height: var(--fpm-status-dot-size);
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    background: var(--fpm-dot);
    vertical-align: middle;
}
.fpm-status-dot:is([data-st="ok"], [data-st="online"], [data-st="running"], [data-st="pulse"]) { --fpm-dot: var(--fpm-tone-good); }
.fpm-status-dot:is([data-st="warn"], [data-st="warning"]) { --fpm-dot: var(--fpm-tone-warn); }
.fpm-status-dot[data-st="error"] { --fpm-dot: var(--fpm-tone-crit); }
.fpm-status-dot:is([data-st="ok"], [data-st="online"], [data-st="running"], [data-st="pulse"], [data-st="error"])::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--fpm-dot);
    pointer-events: none;
    animation: fpm-anim-light-breathe 2.8s ease-in-out infinite;
}
.fpm-status-dot[data-st="error"]::after { animation-name: fpm-anim-light-pulse; animation-duration: 1.4s; }
.fpm-status-dot[data-st="offline"] { background: transparent; box-shadow: inset 0 0 0 2px var(--fpm-offline-ring); }
.fpm-status-dot:is([data-st="nodata"], [data-st="unknown"]) { background: repeating-linear-gradient(45deg, var(--fpm-hatch-line) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--fpm-hatch-line); }
@keyframes fpm-anim-light-breathe { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(2.2); opacity: 0; } }
@keyframes fpm-anim-light-pulse { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(2.4); opacity: 0; } }

/* 6px companion dot (pre-existing —— shared modifiers). */
.fpm-status-dot--sm { width: 6px; height: 6px; border-radius: 50%; background: var(--fpm-text-faint); display: inline-block; }
.fpm-status-dot--sm.fpm-status-dot--ok    { background: var(--fpm-status-ok); }
.fpm-status-dot--sm.fpm-status-dot--warn  { background: var(--fpm-status-warn); }
.fpm-status-dot--sm.fpm-status-dot--error { background: var(--fpm-status-error); }
.fpm-status-dot--sm.fpm-status-dot--info  { background: var(--fpm-text-faint); }

/* 3. TAGS — trigger / intensity classification tags */

/* 4. PILL BAR — segmented filter/tab control */

.fpm-pill-bar { display: inline-flex; background: var(--fpm-recess-fill); border: 1px solid var(--fpm-recess-border); border-radius: var(--fpm-radius-sm); padding: 4px; gap: 4px; position: relative; }
.fpm-pill-bar input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* Single pill inside .fpm-pill-bar. State via :checked sibling or [aria-checked]. */
.fpm-pill-bar__pill { flex-shrink: 0; white-space: nowrap; background: transparent; color: var(--fpm-text-secondary); font-size: var(--fpm-font-body-sm); font-weight: var(--fpm-weight-medium); padding: 5px 12px; border: 1px solid transparent; border-radius: var(--fpm-radius-xs); cursor: pointer; transition: all var(--fpm-transition-fast); }
.fpm-pill-bar__pill:hover { color: var(--fpm-text-strong); background: var(--fpm-bg-surface-hover); }
.fpm-pill-bar input[type="radio"]:checked + .fpm-pill-bar__pill,
/* The chosen pill is a raised key on the recessed track, so the bar reads as a set of buttons. */
.fpm-pill-bar__pill:is([aria-checked="true"], [aria-selected="true"]) { background: var(--fpm-bg-surface-raised); color: var(--fpm-text-strong); font-weight: var(--fpm-weight-semibold); border-color: var(--fpm-border-medium); box-shadow: inset 0 1px 0 var(--fpm-edge); }
/* A choice that removes something (e.g. Never scan) wears the error tint when chosen. */
.fpm-pill-bar input[type="radio"]:checked + .fpm-pill-bar__pill[data-tone="danger"] { background: var(--fpm-status-error-dim); color: var(--fpm-ink-error); border-color: color-mix(in srgb, var(--fpm-status-error) 40%, transparent); }
.fpm-pill-bar input[type="radio"]:focus-visible + .fpm-pill-bar__pill { box-shadow: var(--fpm-shadow-focus-ring); }
/* A button pill (a tab) rings with an outline so the chosen pill keeps its raised shadow. */
.fpm-pill-bar__pill:focus-visible { outline: 2px solid var(--fpm-accent); outline-offset: 2px; }
.fpm-pill-bar input[type="radio"]:disabled + .fpm-pill-bar__pill { cursor: default; opacity: 0.6; }
/* --fpm-fill: the bar spans its container and the pills share it equally. */
.fpm-pill-bar--fill { display: flex; }
.fpm-pill-bar--fill .fpm-pill-bar__pill { flex: 1 1 0; padding-left: 4px; padding-right: 4px; text-align: center; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .fpm-pill-bar__pill { transition: none; } }

/* 5. META-ROW — horizontal key/value meta pairs */

.fpm-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; font-size: var(--fpm-font-meta); color: var(--fpm-text-secondary); }
.fpm-meta-row__pair { display: flex; align-items: center; gap: 5px; }
.fpm-meta-row__key { text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--fpm-weight-semibold); color: var(--fpm-text-muted); }
.fpm-meta-row__value { font-family: var(--fpm-font-mono); color: var(--fpm-text-body); }
.fpm-meta-row__sep { color: var(--fpm-border-strong); user-select: none; }

/*    6. FORM LABEL — sentence-case label for form fields and section heads,
      matching the sectioned form's row labels and the table headers
*/

.fpm-form-label {
    display: block;
    font-size: var(--fpm-font-body-sm);
    font-weight: var(--fpm-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--fpm-text-secondary);
    margin-bottom: 6px;
}
.fpm-form-label--required::after { content: " *"; color: var(--fpm-status-error); }
.fpm-form-label--inline { display: inline; margin-bottom: 0; }

/* 7. TAG CHIP — category/filter chip with runtime --fpm-tag-color hue */

/* Canonical definition. The legacy copy in components.css remains for pages
   that do not load fpmLabels.css; any diff between them is a bug. */
.fpm-tag-chip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fpm-tag-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 8. Reduce-motion guards */

@media (prefers-reduced-motion: reduce) {
    .fpm-chip[data-st="scanning"]::before,
    .fpm-chip[data-st="loading"]::before,
    .fpm-chip[data-st="pending"]::before,
    .fpm-status-dot[data-st]::after {
        animation: none;
        opacity: 0;
    }
}