/* 15W9.1 — shared gate visual vocabulary (GATE_STEP_VISIBILITY design §2).
   One language for gate KIND + STATE across builder / workflow / timeline / trackers.
   Config mode colours by Blocking/Advisory; Outcome mode by latest logged outcome.
   Tokens only (design-language + tables rules): no hex, no px font-sizes, color-mix tints
   so both themes resolve automatically. */

/* --- Kind glyph (standalone, e.g. GateConfigEditor list rows) ------------- */
.aim-gate-kind { font-size: var(--text-sm); }
.aim-gate-kind--deliverable { color: var(--brand-on-surface); }
.aim-gate-kind--approval    { color: var(--status-success); }
.aim-gate-kind--criteria    { color: var(--brand-on-surface); }
.aim-gate-kind--readiness   { color: var(--status-warning); }
.aim-gate-kind--commercial  { color: color-mix(in srgb, var(--status-success) 70%, var(--brand-primary)); }
.aim-gate-kind--unknown     { color: var(--color-text-tertiary); }

/* --- Chip (one gate) ------------------------------------------------------ */
.aim-gate-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border-radius: var(--radius-sm);
    border: var(--border-1) solid var(--border-subtle);
    background: var(--surface-raised);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1;
}

button.aim-gate-chip {
    cursor: pointer;
    transition: transform var(--duration-200) var(--ease-in-out), box-shadow var(--duration-200) var(--ease-in-out);
}
button.aim-gate-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Config mode — emphasis by mode, no outcome colour. */
.aim-gate-chip--cfg-blocking {
    border-color: color-mix(in srgb, var(--status-danger) 45%, transparent);
    color: color-mix(in srgb, var(--status-danger) 62%, var(--color-text-primary));
    background: color-mix(in srgb, var(--status-danger) 10%, var(--surface-raised));
}
.aim-gate-chip--cfg-advisory {
    border-color: var(--border-subtle);
    color: var(--color-text-tertiary);
    background: var(--surface-base);
}

/* Outcome mode — coloured by the latest logged outcome. */
.aim-gate-chip--pass {
    border-color: color-mix(in srgb, var(--status-success) 40%, transparent);
    color: color-mix(in srgb, var(--status-success) 60%, var(--color-text-primary));
    background: color-mix(in srgb, var(--status-success) 12%, var(--surface-raised));
}
.aim-gate-chip--advisory-fail {
    border-color: color-mix(in srgb, var(--status-warning) 42%, transparent);
    color: color-mix(in srgb, var(--status-warning) 62%, var(--color-text-primary));
    background: color-mix(in srgb, var(--status-warning) 12%, var(--surface-raised));
}
.aim-gate-chip--blocking-fail {
    border-color: color-mix(in srgb, var(--status-danger) 48%, transparent);
    color: color-mix(in srgb, var(--status-danger) 64%, var(--color-text-primary));
    background: color-mix(in srgb, var(--status-danger) 14%, var(--surface-raised));
}
.aim-gate-chip--overridden {
    border-color: color-mix(in srgb, var(--brand-border-on-surface) 40%, transparent);
    color: color-mix(in srgb, var(--interactive-base) 60%, var(--color-text-primary));
    background: color-mix(in srgb, var(--interactive-base) 10%, var(--surface-raised));
}
/* not-armed / not-evaluated — first-class HOLLOW states (audit §2.2: never fake a Pass). */
.aim-gate-chip--not-armed {
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--color-text-tertiary);
    background: var(--surface-base);
}
.aim-gate-chip--not-evaluated {
    border-style: dashed;
    border-color: var(--border-subtle);
    color: var(--color-text-tertiary);
    background: transparent;
}

/* --- Strip (per-stage row) ------------------------------------------------ */
.aim-gate-strip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.aim-gate-strip__overflow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.5rem;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    background: var(--surface-base);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* --- Billing point badge (distinct from the Commercial kind icon) --------- */
.aim-billing-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    border: var(--border-1) solid color-mix(in srgb, var(--status-success) 35%, transparent);
    background: color-mix(in srgb, var(--status-success) 10%, var(--surface-raised));
    color: color-mix(in srgb, var(--status-success) 66%, var(--color-text-primary));
    font-size: var(--text-xs);
}

/* --- Handover pill -------------------------------------------------------- */
.aim-handover-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.aim-handover-pill--success {
    background: color-mix(in srgb, var(--status-success) 15%, var(--surface-raised));
    color: color-mix(in srgb, var(--status-success) 60%, var(--color-text-primary));
}
.aim-handover-pill--info {
    background: color-mix(in srgb, var(--interactive-base) 14%, var(--surface-raised));
    color: color-mix(in srgb, var(--interactive-base) 60%, var(--color-text-primary));
}
.aim-handover-pill--warning {
    background: color-mix(in srgb, var(--status-warning) 15%, var(--surface-raised));
    color: color-mix(in srgb, var(--status-warning) 62%, var(--color-text-primary));
}
.aim-handover-pill--danger {
    background: color-mix(in srgb, var(--status-danger) 15%, var(--surface-raised));
    color: color-mix(in srgb, var(--status-danger) 62%, var(--color-text-primary));
}
.aim-handover-pill--neutral {
    background: var(--surface-base);
    color: var(--color-text-secondary);
}